zaknesler / tailwind-preset

Tailwind CSS Laravel Front-end Preset

Laravel 7+ front-end preset for Tailwind CSS. Includes Vue.js (and an example component), a clean and fully-responsive UI, and the utilization of Blade components to reduce code duplication.

This preset also uses Laravel Mix to compile and minify assets. Tailwind comes packaged with PurgeCSS, and this preset is configured to purge the proper files.

This preset is built for Laravel 7 and up. For Laravel 5 or 6, please use version 5.0.

Example Repository

Warning

Laravel presets are designed to be installed onto a fresh instance of Laravel. This preset will overwrite your existing views, assets, and Home controller. Please use with caution.

Installation

1. Require the composer dependency. Laravel will automatically register the package.

   composer require zaknesler/tailwind-preset --dev

2. Install the preset:

   php artisan ui tailwind --auth
   
   # Without authentication scaffolding
   php artisan ui tailwind

3. Install the npm dependencies using your preferred package manager:

   # Using Yarn
   yarn
   
   # Using npm
   npm install

4. Compile assets:

   # Using Yarn
   yarn dev
   
   # Using npm
   npm run dev

Customization

Tailwind is built to be fully customizable, and thus, the tailwind.config.js file that comes with this preset includes a handful of customizations to help get you started. These include adding Inter to the default font stack, a theme color palette for quick customization, as well as configuration for the Tailwind custom-forms plugin.

The theme color palette, by default, simply destructures Tailwind's blue color palette, but can be easily swapped out for your own color palette. For more information, visit the Tailwind color customization page.

This preset is designed to utilize many Tailwind features, including using a plugin, overriding default theme values, extracting components using @apply, and configuration for PurgeCSS. To really get the most out of Tailwind, you need to use it! Take a deep dive into Tailwind's incredible documentation, and most importantly... get your hands dirty with it! I hope this preset helps you out!