A Tailwind CSS Preset for Laravel 5.5
News / November 10, 2017

A Tailwind CSS Preset for Laravel 5.5

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:

To install the preset and start using it in Laravel, you can use the php artisan preset command:

composer require laravel-frontend-presets/tailwindcss
php artisan preset tailwindcss
npm install
npm run dev

If you want to include auth views, run this preset instead:

php artisan preset tailwindcss-auth

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

This appeared first on Laravel News
Laravel News Partners

Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.