Laravel News Podcast host, Michael Dyrynda, quickly released a Tailwind CSS preset for Laravel 5.5 shortly after the first release of the open-source version of this excellent utility-first CSS library:
???? Took a run at making a basic @tailwindcss scaffolding preset for @laravelphp https://t.co/Cf0WdbheFu pic.twitter.com/OfLN1VQV5d
— Michael Dyrynda (@michaeldyrynda) November 1, 2017
To install the preset and start using it in Laravel, you can use the php artisan preset command:
composer require laravel-frontend-presets/tailwindcssphp artisan preset tailwindcssnpm installnpm run devIf you want to include auth views, run this preset instead:
php artisan preset tailwindcss-authHere’s what the login form looks like after installing the preset:
Tailwind is highly customizable through the tailwind.js file in the root of your Laravel 5.5 project after you run the preset. Just update the brand-* colors to your preferred style, and you can customize the overall look and feel:
var colors = { // ... get ['brand-darkest']() { return this['pink-darkest']; }, get ['brand-darker']() { return this['pink-darker']; }, get ['brand-dark']() { return this['pink-dark']; }, get ['brand']() { return this['pink']; }, get ['brand-light']() { return this['pink-light']; }, get ['brand-lighter']() { return this['purple-lighter']; }, get ['brand-lightest']() { return this['pink-lightest']; },};Will create the following branding:
Everyone is raving about Tailwind CSS right now, which is available—as of November 1st—as an early alpha release. We see some promising results from the community after they’ve gotten their hands on the framework and this library is definitely going to be a big hit. As of this writing, the GitHub repository has ~2,300 stars and over 100 forks and 35 contributors.
Check out the official repository for complete installation instructions for this preset. Also, check out the official Tailwind CSS documentation to learn how to start using this preset as you build out a Laravel application.
