Primer: Laravel 5.5, Tailwind 0.2 and PurgeCSS bliss

Remove 96.48% of unused CSS on build to improve performance

Recently Andrew Del Prete and Full Stack Radio posted about removing unused css declarations when building Tailwinds CSS into a Laravel project.

It sounds like magic but behind the scenes it is searching through all .html, .blade.php, .js and .vue files for css classes and removing any from the compiled css that are never used on the frontend.

After working through it myself I put together a step-by-step from scratch guide.

This guide assumes you’re on a Mac and have Laravel Valet 5.5, Laravel 5.5 installer, NPM 5.5, Node 8.9, and GIT.

The project setup

# Setup valet folder and TLD
valet domain app
mkdir ~/Sites/valet && cd $_
valet park
# Create a new laravel project
laravel new tailwind-example
cd tailwind-example
# Setup a GIT save point
git init
git add .
git commit -m "Initial import"
# Secure the domain
valet secure

Verify the frontend is working

Visit https://tailwind-example.app

Base Laravel installation

Install Tailwind CSS Preset

Using the Laravel 5.5.x Frontend preset for Tailwind CSS package, pulling in Tailwind couldn’t be easier.

# Pull in Tailwind CSS
composer require laravel-frontend-presets/tailwindcss
php artisan preset tailwindcss
# Install and build the frontend assets
npm install
npm run dev
# Snapshot a GIT version
git add .
git commit -m "Tailwind preset in place"

New Tailwind Laravel frontend

Laravel welcome view with Tailwind CSS

Initial Tailwind build CSS file size

Laravel mix() output

Initial main.css file is 261 kB.

Using the unusedCSS Chrome Extension, the results are telling:

Number: 4998
Used: 27
Unused: 4971
Duplicate: 35

Add PurgeCSS and dependencies

# Install PurgeCSS
npm install --save-dev purgecss
# Install the Webpack dependencies
npm install --save-dev glob-all purgecss-webpack-plugin

Add PurgeCSS into webpack.mix.js

Example credit from Andrew Del Prete.

Change the mix.postCss() to use Laravel’s default main.css filepath and add the Javascript build back:

mix.postCss("resources/assets/css/main.css", "public/css", [tailwindcss("./tailwind.js")])
  .js('resources/assets/js/app.js', 'public/js');

Build to remove all unused CSS

# Build with new webpack config
npm run dev
# GIT snapshot
git add .
git commit -m "PurgeCSS performance in place"

Results

Laravel mix() output

New main.css file is 9.2 kB. a 96.48% reduction in file size.

Stats from the unusedCSS Chrome Extension:

Number: 62
Used: 27
Unused: 35
Duplicate: 16

All the power of Tailwind CSS without any bloat

Tailwind’s utility first approach makes building UI’s fast and simple but can come with the side effect of an initially large output CSS file. Others have written about the Cost of Javascript and sites like What Does My Site Cost? show the importance of optimizing for file size.

Hope this primer inspires the removal of CSS bloat on your project.