I’ve recently been working on converting one of my side projects from Bootstrap to Tailwind and came across awssat/tailwindo. This package does precisely that – automatically converts Bootstrap component classes to Tailwind utility classes.
You can install this package globally on your system by running the following command.
composer global require awssat/tailwindo
To start converting your files to Tailwind run the following command to loop through all of your Laravel blade view files.
cd ~/my-project tailwindo resources/views --extensions=php --recursive=true --replace=true
Tailwindo is also able to convert Vue.js and HTML files.
tailwindo resources/assets/js/components --extensions=vue --recursive=true --replace=true
If you’d like to convert one file at a time, you could also run.
After running Tailwindo over your view files, you’ll get results similar to the following.
- <div class="alert alert-info"></div> + <div class="relative px-3 py-3 mb-4 border rounded text-teal-darker border-teal-dark bg-teal-lighter"></div>
- <input class="form-control" type="text" /> + <input class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-grey-darker border border-grey rounded" type="text" />
- <a href="#" class="btn btn-primary btn-lg"></a> + <a href="#" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-blue-lightest bg-blue hover:bg-blue-light py-3 px-4 text-xl leading-tight"></a>
I’ve found this package to be helpful not only for converting files automatically but to better assist me learning Tailwind classes and how they relate to Bootstrap’s classes which I know so well. I encourage you to take a look at the package documentation and the Converter.php file which does the heavy lifting. I’ve found this to be a helpful reference.
Join the weekly newsletter and never miss out on new tips, tutorials, and more.
- Full Stack or Back-End Developer
Alexandria, VA; Tallahassee, FL; Orlando, FL
Marketing for Change
- Full Stack Software Engineer
Atlanta, GA or Remote
- Laravel/PHP Developer
- Software Engineer, Web Applications
Vaughan, ON, Canada
- Contract Services Software Engineer (Laravel | Vue | Tailwind)
- Senior Laravel Developer
GE Software Inc.
- Senior Full Stack Developer (PHP | Vue | DDD)
A Stand-Alone Laravel Slack Package
The gpressutto5/laravel-slack composer package is a Slack notification library for Laravel 5.5 by Guilherme Pressutto…
May 2018 Git Security Vulnerability
Upgrade Git to address CVE 2018-11235 which is a new industry-wide security vulnerability in Git that can lead to arb…