Almost any time I spin up a new laravel app, I also install tailwind to enable me to move fast with my views.

What is Tailwindcss?

Tailwind is a utility-first CSS framework for rapidly building custom designs. Which means any element you can add utilities to change the style with minimal cognitive load. If you want add some padding to an element, add a class of p-4 p is for padding, 4 is the units of padding you want to add. If you specifically want to add padding to the top of an element you would use the class pt-4 which signifies padding on the top with 4 units.

I freaking love Tailwind. Its such an easy to use css framework that allows me to focus more on the content and content than worry about how my grid system is working. Combining it with Laravel has made so much sense for me and I want to share the steps I use to install Tailwind on a fresh laravel app.

Install Laravel

Im not going to spend too much time here - there are many, many articles and great documentation on how to install a fresh Laravel app.

The way I do it is using the Laravel installer.

laravel new tailwind

We’ll call this project tailwind for the sake of the tutorial, but you can name your project whatever you want.

Install Tailwind

Now lets install tailwind via NPM to the project.

npm install tailwindcss --save-dev

Once installed we need to initiate the config file for tailwind. This is used if we want to add plugins or overrides to the framework.

./node_modules/.bin/tailwind init tailwind.config.js

This should drop the file on the root of your project.

Next lets install the new dependencies. I have found explicitly installing cross-env has solved some occasional errors that pop up with NPM. Your milage may vary.

npm install
npm install cross-env
npm run dev

Now we need to update the webpack config file to bundle up tailwind when we compile our assets. For this, we need to tell web pack what Tailwind is and then how to process it using the config file we made earlier.

Last step I do is I create a new file in resources/sass directory called styles.pcss. You can call your file anything you want, but this is where we will be placing the tailwind directives to load and will be available for us to use when writing our frontends.

There are 3 that you will want to use, and many times, I don’t add any extra css to this file other than these three lines. For a more custom site, or if you want to define different colors, you can do that here too. If you want to add your own styles, you can do so by adding them between the components include and the utilities include. Since this is a PostCSS file, you can certainly use includes the way you’d expect in sass.

resources/sass/styles.pcss

The last step you need to do is to re-run npm to pick up the changes we made to the webpack and you should now have tailwind baked into your laravel app.

npm run dev

Testing Tailwind

The quickest way to test your new tailwind utilities is to link to the css file in your welcome template. Then place a class on the body and give it a background color and change the text to white. If you see the changes, you are now rolling with Tailwind.

Optimize Tailwind for Production

Now, Tailwind is pretty big because of all the variations it has on every element. This might not be desirable to deploy in its full form. Especially on mobile where a large css file could make the experience kind of bad.

Luckily, the folks at tailwind and the community have solved this by trimming excess classes and utilities that you are not using in your html code! That sounds like magic, and it kind of is.

When I am in development, I want full access to all tailwind gives me, but when I deploy to production, I want it to be slimmed down. So there is a tool called purgeCSS that the great people at Spaite have made an npm package for.

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

Then define that in your webpack.config.js file

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

Then at the bottom of our webpack mix command we add a purgeCss function where we specify what environment, which directories and what extensions you want to target the purge on.

Now anytime you run npm to compile for production, purgeCss will go through the directories you specified and pick out only the classes you are using to compile into a much much smaller file.

One thing to note if you are using a CMS, though. If you purge the classes and try to use them in your CMS, they will not be available. For example, if you are not using font-bold and you try to add it later in your CMS, the text will not change on the frontend. You may want to create a elements page that have all the things you want to use so its easily deployable and scannable by the purgeCss plugin.