awssat/tailwindo

🔌 Convert Bootstrap CSS code to Tailwind CSS code

Tailwindo

This tool can convert Your CSS framework (currently Bootstrap) classes in HTML/PHP (any of your choice) files to equivalent Tailwind CSS classes.

Features

• Made to be easy to add more CSS frameworks in the future (currently Bootstrap).
• Can convert single files/code snippets/folders.
• Can extract changes to a separate css file as Tailwind components and keep old classes names. like:

.p-md-5 {
	@apply md:p-7;
}

Help Us

• If you find unexpected conversion result, create an issue; if you managed to fix it, please create a PR.
• If you are familiar with another CSS frameworks (like Foundation, Pure..), please create a PR and add it (see BootstrapFramework.php file).

Docs

• Introduction
• Installation
• Quick start

tailwindo's Issues

TailwindCSS 1.x

Hi there 👋

Thanks for the cool package!

I just wondered if you had any plans to upgrade it to support TailwindCSS 1.x.

Command Not Found

Issue Type

• Question

End User Info

-- Laravel Version: 5.7.24

-- PHP Version: 7.2.14

-- Database Driver & Version: MySQL 5.7.25

-- Web Server Driver & Version: nginx/1.15.6

-- OS Driver and Version: Ubuntu 18.04.1

I have installed the package successfully but when run the command I get a error.Any ideas here?

_> /var/www/html# tailwindo resources/views/Staff
tailwindo: command not found

Update for PHP 8.1 and Symfonly Console 6.0?

Trying to install and receive the following

 Problem 1
    - awssat/tailwindo[3.0.0, ..., 3.0.4] require php ^7.2.0 -> your php version (8.1.5) does not satisfy that requirement.
    - awssat/tailwindo[3.0.5, ..., 3.0.6] require symfony/console ^4.0|^5.0 -> found symfony/console[v4.0.0, ..., v4.4.41, v5.0.0, ..., v5.4.8] but the package is fixed to v6.0.8 (lock file version) by a partial update and that version does not match. Make sure you list it as an argument for the update command.

flex-grow-1 and flex-shrink-1 not converted

Bootstrap: 4
Vue: 2

tailwindo --recursive=true --extensions=vue --replace=true ./src

Hello. I'm using this tool to convert a Vue/Bootstrap app to Tailwind. I just wanted to let you know that instances of flex-grow-1 and flex-shrink-1 were not converted. In Tailwind, the corresponding classes are flex-grow and flex-shrink.

The project I'm converting is octo (in case you want to see the source).

Add Outline & Gray styles to the button utility

wrong loc

I get this output: `No file with matching extensions found`

I get this output

C:\webdev\tw-convert
λ tailwindo C:/webdev/tw-convert/ --extension=html --replace=true
No file with matching extensions found

Make it run in docker

Make a tailwindo to run from a docker. Make a docker image file.

command not found: tailwindo

I might do something wrong but I have installed tailwindo in my system using composer global require awssat/tailwindo. Yet, I keep receiving the following error: command not found: tailwindo

Status?

What is the status of this project? How good is the conversion, in your (unbiased, of course) opinion? 😄 What kind of things cannot be converted? What happens with them (copied, ignored, warning)?

Also, what about non-bootstrap additional styles in the source file. Are they converted too?

Thanks!

Installation questions

I'm trying to install tailwindo, but it requires PHP and Composer. Docs don't say what version of PHP or Composer are required. When I run the installation command I'm getting a message that:
Package awssat/tailwindo has a PHP requirement incompatible with your PHP version, PHP extensions and Composer version. Can you provide more information on how to configure PHP / Composer to work with this?

sr-only accidentally removed

Tailwindo removed .sr-only on a div.

This is a common bootstrap/tailwindcss utility: https://tailwindcss.com/docs/screen-readers/

Guessing that's happening because this line is commented out:

tailwindo/src/Framework/BootstrapFramework.php

Line 152 in 7a79192

// 'sr-only' => 'sr-only',

HAML support

I have a Rails project which is using HAML as HTML template syntax. I tried converting the contained Bootstrap CSS to Tailwind and it

TLDR about HAML: Instead of e.g. <span class="text-secondary"> the code is %span.text-secondary.
There are a few extra cases, e.g. if the tag name is div, it can be removed (e.g. <div class="d-none d-md-block"> becomes .d-none.d-md-block). IDs can also be included like h1#overview and there are quite a few more cases like attribute syntax (based on Ruby) which allows e.g. generating class names. For more, see the website.

Is there a way to get tailwindo to convert my files?
If not directly: Are there any recommendations how to proceed? E.g. there are tools to convert HAML to HTML (with ERB, which is similar to PHP in HTML and seems to work) and back... which might be included in the processing pipeline.

Furthermore (might be worth a separate issue, if the error is not on my side), the files are called e.g. application.html.haml and neither of the extensions haml, html nor html.haml found any files: tailwindo -e html,haml,html.haml while calling e.g. tailwindo application.html.haml directly works but only detects embedded HTML or SVG code.

React bootstrap support.

Is there any way to convert react-bootstrap, which is using only bootstrap classes, to tailwindcss?

When using components=true duplicate Classes are created

When you parse using --components=true the css file generated works for the most part. The only main problem is that it generates duplicate classes if many elements with the same class exist in the original file.

For example if you have the following:

<div class="alert alert-warning">
some warning alert
</div>
.
some other code
.
<div class="alert alert-danger">
this is a second alert.. but now is danger
</div>

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-warning {
	@apply bg-orange-200 border-orange-300 text-orange-800;
}

.
.
.

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-danger {
	@apply bg-red-200 border-red-300 text-red-800;
}

see that .alert is duplicated

Wont install on latest php/composer

omposer global require awssat/tailwindo

Changed current directory to /Users/shoemoney/.composer

[InvalidArgumentException]
Package awssat/tailwindo has a PHP requirement incompatible with your PHP version, PHP extensions and Composer version

require [--dev] [--dry-run] [--prefer-source] [--prefer-dist] [--fixed] [--no-suggest] [--no-progress] [--no-update] [--no-install] [--no-scripts] [--update-no-dev] [-w|--update-with-dependencies] [-W|--update-with-all-dependencies] [--with-dependencies] [--with-all-dependencies] [--ignore-platform-req IGNORE-PLATFORM-REQ] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [--sort-packages] [-o|--optimize-autoloader] [-a|--classmap-authoritative] [--apcu-autoloader] [--apcu-autoloader-prefix APCU-AUTOLOADER-PREFIX] [--] []...

❯ composer -V
Composer version 2.0.9 2021-01-27 16:09:27
❯ php -v
PHP 8.0.2 (cli) (built: Feb 4 2021 18:57:55) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.2, Copyright (c) Zend Technologies
with Xdebug v3.0.2, Copyright (c) 2002-2021, by Derick Rethans
with Zend OPcache v8.0.2, Copyright (c), by Zend Technologies

Extra hover:bg-* in class generated for btn-outline-*

Thanks for making this tool!

I think I found a small issue:

.btn-outline-primary {
	@apply text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white bg-white hover:bg-blue-600;
}

has hover:bg-blue-600 twice.

Conclusion: don't install symfony/console v5.0.5

Problem 1 - Installation request for awssat/tailwindo ^3.0 -> satisfiable by awssat/tailwindo[3.0.0]. - Conclusion: remove symfony/console v5.0.5 - Conclusion: don't install symfony/console v5.0.5 - awssat/tailwindo 3.0.0 requires symfony/console ^4.0 -> satisfiable by symfony/console[v4.0.0, v4.0.1, v4.0.10, v4.0.11, v4.0.12, v4.0.13, v4.0.14, v4.0.15, v4.0.2, v4.0.3, v4.0.4, v4.0.5, v4.0.6, v4.0.7, v4.0.8, v4.0.9, v4.1.0, v4.1.1, v4.1.10, v4.1.11, v4.1.12, v4.1.2, v4.1.3, v4.1.4, v4.1.5, v4.1.6, v4.1.7, v4.1.8, v4.1.9, v4.2.0, v4.2.1, v4.2.10, v4.2.11, v4.2.12, v4.2.2, v4.2.3, v4.2.4, v4.2.5, v4.2.6, v4.2.7, v4.2.8, v4.2.9, v4.3.0, v4.3.1, v4.3.10, v4.3.11, v4.3.2, v4.3.3, v4.3.4, v4.3.5, v4.3.6, v4.3.7, v4.3.8, v4.3.9, v4.4.0, v4.4.1, v4.4.2, v4.4.3, v4.4.4, v4.4.5, v4.4.6, v4.4.7, v4.4.8]. - Can only install one of: symfony/console[v4.2.0, v5.0.5]. - Can only install one of: symfony/console[v4.2.1, v5.0.5]. - Can only install one of: symfony/console[v4.2.10, v5.0.5]. - Can only install one of: symfony/console[v4.2.11, v5.0.5]. - Can only install one of: symfony/console[v4.2.12, v5.0.5]. - Can only install one of: symfony/console[v4.2.2, v5.0.5]. - Can only install one of: symfony/console[v4.2.3, v5.0.5]. - Can only install one of: symfony/console[v4.2.4, v5.0.5]. - Can only install one of: symfony/console[v4.2.5, v5.0.5]. - Can only install one of: symfony/console[v4.2.6, v5.0.5]. - Can only install one of: symfony/console[v4.2.7, v5.0.5]. - Can only install one of: symfony/console[v4.2.8, v5.0.5]. - Can only install one of: symfony/console[v4.2.9, v5.0.5]. - Can only install one of: symfony/console[v4.3.0, v5.0.5]. - Can only install one of: symfony/console[v4.3.1, v5.0.5]. - Can only install one of: symfony/console[v4.3.10, v5.0.5]. - Can only install one of: symfony/console[v4.3.11, v5.0.5]. - Can only install one of: symfony/console[v4.3.2, v5.0.5]. - Can only install one of: symfony/console[v4.3.3, v5.0.5]. - Can only install one of: symfony/console[v4.3.4, v5.0.5]. - Can only install one of: symfony/console[v4.3.5, v5.0.5]. - Can only install one of: symfony/console[v4.3.6, v5.0.5]. - Can only install one of: symfony/console[v4.3.7, v5.0.5]. - Can only install one of: symfony/console[v4.3.8, v5.0.5]. - Can only install one of: symfony/console[v4.3.9, v5.0.5]. - Can only install one of: symfony/console[v4.4.0, v5.0.5]. - Can only install one of: symfony/console[v4.4.1, v5.0.5]. - Can only install one of: symfony/console[v4.4.2, v5.0.5]. - Can only install one of: symfony/console[v4.4.3, v5.0.5]. - Can only install one of: symfony/console[v4.4.4, v5.0.5]. - Can only install one of: symfony/console[v4.4.5, v5.0.5]. - Can only install one of: symfony/console[v4.4.6, v5.0.5]. - Can only install one of: symfony/console[v4.4.7, v5.0.5]. - Can only install one of: symfony/console[v4.4.8, v5.0.5]. - Can only install one of: symfony/console[v4.0.0, v5.0.5]. - Can only install one of: symfony/console[v4.0.1, v5.0.5]. - Can only install one of: symfony/console[v4.0.10, v5.0.5]. - Can only install one of: symfony/console[v4.0.11, v5.0.5]. - Can only install one of: symfony/console[v4.0.12, v5.0.5]. - Can only install one of: symfony/console[v4.0.13, v5.0.5]. - Can only install one of: symfony/console[v4.0.14, v5.0.5]. - Can only install one of: symfony/console[v4.0.15, v5.0.5]. - Can only install one of: symfony/console[v4.0.2, v5.0.5]. - Can only install one of: symfony/console[v4.0.3, v5.0.5]. - Can only install one of: symfony/console[v4.0.4, v5.0.5]. - Can only install one of: symfony/console[v4.0.5, v5.0.5]. - Can only install one of: symfony/console[v4.0.6, v5.0.5]. - Can only install one of: symfony/console[v4.0.7, v5.0.5]. - Can only install one of: symfony/console[v4.0.8, v5.0.5]. - Can only install one of: symfony/console[v4.0.9, v5.0.5]. - Can only install one of: symfony/console[v4.1.0, v5.0.5]. - Can only install one of: symfony/console[v4.1.1, v5.0.5]. - Can only install one of: symfony/console[v4.1.10, v5.0.5]. - Can only install one of: symfony/console[v4.1.11, v5.0.5]. - Can only install one of: symfony/console[v4.1.12, v5.0.5]. - Can only install one of: symfony/console[v4.1.2, v5.0.5]. - Can only install one of: symfony/console[v4.1.3, v5.0.5]. - Can only install one of: symfony/console[v4.1.4, v5.0.5]. - Can only install one of: symfony/console[v4.1.5, v5.0.5]. - Can only install one of: symfony/console[v4.1.6, v5.0.5]. - Can only install one of: symfony/console[v4.1.7, v5.0.5]. - Can only install one of: symfony/console[v4.1.8, v5.0.5]. - Can only install one of: symfony/console[v4.1.9, v5.0.5]. - Installation request for symfony/console (locked at v5.0.5) -> satisfiable by symfony/console[v5.0.5].

Can't install with symfony/console ^4

$ composer global require awssat/tailwindo
Using version ^2.0 for awssat/tailwindo
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for awssat/tailwindo ^2.0 -> satisfiable by awssat/tailwindo[2.0].
    - Conclusion: remove symfony/console v4.0.8
    - Conclusion: don't install symfony/console v4.0.8
    - awssat/tailwindo 2.0 requires symfony/console ^3.0 -> satisfiable by symfony/console[v3.0.0, v3.0.1, v3.0.2, v3.0.3, v3.0.4, v3.0.5, v3.0.6, v3.0.7, v3.0.8, v3.0.9, v3.1.0, v3.1.1, v3.1.10, v3.1.2, v3.1.3, v3.1.4, v3.1.5, v3.1.6, v3.1.7, v3.1.8, v3.1.9, v3.2.0, v3.2.1, v3.2.10, v3.2.11, v3.2.12, v3.2.13, v3.2.14, v3.2.2, v3.2.3, v3.2.4, v3.2.5, v3.2.6, v3.2.7, v3.2.8, v3.2.9, v3.3.0, v3.3.1, v3.3.10, v3.3.11, v3.3.12, v3.3.13, v3.3.14, v3.3.15, v3.3.16, v3.3.2, v3.3.3, v3.3.4, v3.3.5, v3.3.6, v3.3.7, v3.3.8, v3.3.9, v3.4.0, v3.4.1, v3.4.2, v3.4.3, v3.4.4, v3.4.5, v3.4.6, v3.4.7, v3.4.8].
   ...
    - Can only install one of: symfony/console[v3.4.5, v4.0.8].
    - Can only install one of: symfony/console[v3.4.6, v4.0.8].
    - Can only install one of: symfony/console[v3.4.7, v4.0.8].
    - Can only install one of: symfony/console[v3.4.8, v4.0.8].
    - Installation request for symfony/console (locked at v4.0.8) -> satisfiable by symfony/console[v4.0.8].


Installation failed, reverting ./composer.json to its original content.

I believe this is because I use FriendsOfPHP/PHP-CS-Fixer globally, here my global composer.json file:

{
    "require": {
        "friendsofphp/php-cs-fixer": "^2",
        "laravel/installer": "^2",
        "h4cc/wkhtmltopdf-amd64": "^0.12.4",
        "h4cc/wkhtmltoimage-amd64": "^0.12.4",
        "phpunit/phpunit": "^7"
    }
}

I think the following in this package's composer.json will fix this:

...
"require": {
        "php" : "~7.0",
        "symfony/console": "^3.0 || ^4.0"
},
...

Recursive search and replace, custom extensions, and a way to replace files

Greetings!

I have been messing around with this codebase a little bit today and have some custom changes I put togeterh. My changes include the following:

• Add recursive flag option to allow the scan to go more than one directory deep.
• Add exts option to allow for custom file extensions (adding this will allow for Vue file support)
• Add an option to replace the files, probably would be used in conjunction with --recursive=true just to make change files much more easy.

My big question is if you would like these changes, and if you would, would you prefer one PR or multiple PRs for these changes.

I merged all my changes onto my master branch, and I tried to keep all other branches as clean as possible in case only a one or two of the changes were desired.

BoostrapFramework.php missing bg- on line 538

Apologies, I would have done a PR but editor reformats your page add a slew of additional diffs. Line 538 is:

        'success'   => 'bg-green-500 text-white hover:green-600',

But should be

        'success'   => 'bg-green-500 text-white hover:bg-green-600',

Upgrade supported major versions of frameworks

tailwindo/src/Framework/BootstrapFramework.php

Lines 58 to 67 in 6f8513c

	public function supportedVersion(): array
	{
	/**
	* latest versions of Bootstrap/Tailwind during the coding of this file.
	*/
	return [
	'4.4.1', // bootstrap
	'1.4.0', //tailwind
	];
	}

Currently:
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.1.8
https://github.com/twbs/bootstrap/releases/tag/v5.2.0

Bootstrap 4 -> tailwind support?

What would it take to get to support bootstrap 4?

Nothing seems to work, no conversion.

I've done commands like

tailwindo /resources/views/auth/login.blade.php & tailwindo /resources/views/ --recursive=true but nothing changes, stays as bootstrap, any ideas?

Extract changes to a single file & recursively convert a whole directory should create a single css file

When using extract to a single file with the recursive option, a tailwindo-components.css file is create in each directory.

For my use case at least it would be much better to have a merge of all those definitions in a single css file. It could be an option of course.

By the way this is really a great package !

Tailwindo Documentation Links not Working

Good day,
It was by good fortune that I discovered your repo. I went via a standard web search and got to your page here on the Best of PHP site.
However, the links to the documentation on the page don't seem to work (threw an error "Not Found" in plain HTML) and might throw other visitors off.
I see all is here under your GitHub repo, which sorts my problem, though.
Just thought you might want to be made aware of the issue.

On a side note;

• I notice your package requires PHP 7.2 | 8.0 respectively.
• Are you planning to include PHP 8.1, Symfony 6 and future versions, or is the Symfony 5 relation holding you back?
• Do you think we can be be bold and try to do the migration to PHP 8.1, Symfony 6 ourselves?

I'm quite new to PHP, Laravel 9 and their Symfony dependencies specifically, so it might be a stupid question.
I look forward to using your package, as it will make my life easier as well now.
Thanks!

Question: Can I convert bootstrap.css to tailwind CSS using @apply?

I'm looking to convert Bootstrap 3 to Tailwind CSS so that all Bootstrap 3 classes continue to work, but use @apply to map to Tailwind classses.

This tool appears to be working on HTML, but can it work on CSS without the need for a HTML file?

If not, guess I need an HTML file that uses ALL of Bootstrap 3 as an input source...

Tailwindo install

I did install tailwindo using composer but got
command not found
each time i tried using it