Skip to content
This repository has been archived by the owner on May 27, 2022. It is now read-only.
/ tailwind-preset Public archive

An awesome Tailwind CSS front-end preset for Laravel 7.

License

Notifications You must be signed in to change notification settings

zaknesler/tailwind-preset

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Laravel Front-end Preset

Latest Stable Version Total Downloads License

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

View preview screenshots

Welcome View

Login View

Home View

Responsive Nav

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!