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 🙂

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();
}

Created with Jigsaw, hosted on Netlify.