🔌 Convert Bootstrap CSS code to Tailwind CSS code

  • By Awssat
  • Last update: Dec 30, 2022
  • Comments: 16

Tailwindo

Latest Version on Packagist Actions Status

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

Github

https://github.com/awssat/tailwindo

Comments(16)

  • 1

    Command Not Found

    Issue Type

    • [x] 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
    
  • 2

    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].

  • 3

    Add custom extensions support

    Changes

    • Adds the ability to add custom file extensions to the search for files with the flags --extentions=php,html or -e php,html

    Closes https://github.com/awssat/tailwindo/issues/5

  • 4

    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?

  • 5

    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

  • 6

    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',
    
  • 7

    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?

  • 8

    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"
    },
    ...
    
  • 9

    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.

  • 10

    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...

  • 11

    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

    image
  • 12

    Upgrade supported major versions of frameworks

    https://github.com/awssat/tailwindo/blob/6f8513c7728fb73f2daae81080f64f04f1718e0d/src/Framework/BootstrapFramework.php#L58-L67

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

  • 13

    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!

  • 14

    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.
    
  • 15

    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.

  • 16

    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