I use tailwind css for pretty much all of my projects at work and personal side projects.

It enables me to get up and running quickly, creating custom styling for dom elements in a sleek and professional way.

I love designing as I go along, being able to present production ready ideas as quickly as possible.

Initially, I tend to use the tailwind css cdn link to get started swiftly. However, when trying to make sure your application is optimized, it's important to remove all waste from production code.

With that is mind, I use PurgeCss to remove unneeded css rules from my compiled css file. This can be set up quite simply in laravel projects.

Setting up tailwind

Tailwind needs to be installed in the laravel project:

npm install tailwindcss

After this, I then tend to create a .scss file within the /resources/sass folder.

For this example we will use /resources/sass/style.sass.

Tailwind directives need to be added which will add tailwind's base styling to the file:

// /Resources/sass/style.sass

@tailwind base;

@tailwind components;

@tailwind utilities;

Create tailwind's config file

To create this configuration file, run:

npx tailwind init

This will create /Resources/sass/tailwind.config.js with some default configuration.

This configuration can be used for such things as overriding/extending base colours, adding tailwind plugins etc.

Introducing Laravel Mix PurgeCss

Laravel-mix-purgecss is a npm package which is preset to scan all relevant files within the /Resources folder for css styling, and uses purgeCss to delete all unused css styling from the final compiled .css file.

You can install this by running the following command:

npm install laravel-mix-purgecss --save-dev

Setting up laravel mix

With tailwind and laravel-mix-purgecss set up, we can then set up the webpack.mix.js file used to specify what should be compiled. Add/Replace the following:

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss')

require('laravel-mix-purgecss');

mix.sass('resources/sass/style.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./resources/sass/tailwind.config.js') ],
    })
    .purgeCss();

What this does is the following:

  • Imports laravel-mix, tailwindcss and laravel-mix-purgecss to be used to compile assets.
  • Specify which file to compile (as well as its destination folder)
  • Set compile options
  • run purgecss as the final step

processCssUrls is disabled as this option does not work with `.sass` files

Now, when running a compile (npm run dev, npm run watch, npm run production), all css rules which are note used in your application will be removed, resulting in a lean css file.

Adding the file in a laravel blade template can be done with the following:

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

Ignoring css from purge

I was in a situation where some classes wouldn't show in a project until certain conditions were met. This in particular happened with vue.js where there was a conditional class on an element.

It is possible to ignore certain classes when running the purge process. This involves adding prefixing and appending css code with an indicator to ignore that section of css:

/** purgecss start ignore **/

// css goes here

/** purgecss end ignore **/

Adding these two lines will force purge css to not process that code.

I hope this helps.