Install Tailwind with Laravel

I wrote this tutorial on Tuesday, June 30, 2020

Tailwind is an incredible CSS Framework, but how do you get it working - with all the cool bits like purging and rule usage in scss - in Laravel. I'll show you how here!

Last tested on:

  • Laravel 7.15
  • Tailwind 1.4.6

All in all, if you follow these simple instructions - we'll get Tailwind in your project in just two minutes, and fully configured in 5!

Installing Tailwind into Laravel

Firstly, we need to install the packages we are going to use to bring Tailwind into use:

$ npm install tailwind postcss-import

Now we'll create the tailwind config file - this is necessary if we are going to want to extend tailwind with things like custom colours or adding the increate Tailwind UI system.

$ npx tailwindcss init

Next, we need to actually add Tailwind to our CSS. For this, we are going to edit the resources/sass/app.scss file:

@import  "tailwindcss/base";
@import  "tailwindcss/components";
@import  "tailwindcss/utilities";

Finally, we need to setup our webpack configuration file to reference the plugins and config we added to our project! Here is a copy of my webpack.config.js file, feel free to copy the bits you need!

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

//-- Site JS
mix.js('resources/js/app.js', 'public/js')

//-- Site CSS
mix.sass('resources/sass/app.scss', 'public/css')
.options({
	processCssUrls: false,
	postCss: [ 
		require('postcss-import'),
		tailwindcss('./tailwind.config.js') 
	],
})

if (mix.inProduction()) {
	mix.version();
} else {
	mix.sourceMaps();
}

Controlling Filesize

If we go ahead and run the command (npm run dev) to compile our SASS and Tailwind into fully functional CSS that our browsers can use, you'll notice the file size is very big.

/css/app.css 3.56 MiB

As we explained in our other tutorial about this called Tailwind && Laravel Mix - Getting that CSS filesize down its due to Tailwind adding every single rule in its library to our compiled CSS. That is very useful when we are developing - Tailwind really speeds up development of visual UX due to its semantic building blocks so having the full library available is exactly what you need - but when we publish, we only need the rules we are actually using.

If you are running Tailwind version 1.3 or earlier - please use the guide on Tailwind && Laravel Mix - Getting that CSS filesize down instead, as the Purge option in Tailwind was not available then.

Lets get Purge working on our Laravel codebase then. We need to tell the Purge system where to look for our files, so it can note which classes we use. Lets change our tailwind.config.js file and tell the purge system where our Laravel views are:

module.exports = {
  purge: [
    './resources/views/**/*.php'
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Now, lets run the system again (npm run prod) and see what we get:

Please note - purge only works on PRODUCTION, which is why we are running npm run prod this time. Like we said above - we want the full Tailwind library available when we are developing - so the system will not purge until we run the production command!

/css/app.css 14 KiB

Awesome, a decrease in filesize of 99.6185% 👍

Created with Jigsaw, hosted on Netlify.