Upgrading Laravel Apps to Tailwind CSS 1.4

Warning!

This was written over two years ago, so some information might be outdated. Frameworks and best practices change. The web moves fast! You may need to adjust a few things if you follow this article word for word.

Now that Tailwind CSS 1.4 is out it's a great time to upgrade your old, tired app. Okay, maybe your app already had version 1.3, but if not, the latest two versions (1.3 and 1.4) bring some amazing improvements. Most notable are the new space between utilities and built in PurgeCSS support.

Upgrading is easy! Run npm install (pro tip: npm i is a shortcut). You might need to double check your package.json file if that doesn't work for you. Make sure your version constraint allows updating to 1.4+ -- mine looks like this:

Copied!

1"tailwindcss": "^1.0",

"tailwindcss": "^1.0",1"tailwindcss": "^1.0",

"tailwindcss": "^1.0",

So you've got the upgrade, but let's talk about how to use a snazzy new feature -- built in PurgeCSS support. If you're currently using the PurgeCSS Wrapper for Laravel Mix to add purgecss, we can remove it. Delete the laravel-mix-purgecss line from your package.json and run npm i once again.

Open up your tailwind.config.js file (you are using a config file, aren't you?)... add the new purge property. Your config file might look like this:

Copied!

 1let defaultConfig = require('tailwindcss/defaultConfig')
 2 
 3module.exports = {
 4  // This is the new section
 5  purge: [
 6    // Your options may vary
 7    'app/**/*.php',
 8    'resources/**/*.less',
 9    'resources/**/*.js',
10    'resources/**/*.php',
11  ],
12 
13  theme: {
14    // ...
15  },
16}

let defaultConfig = require('tailwindcss/defaultConfig')

module.exports = {
  // This is the new section
  purge: [
    // Your options may vary
    'app/**/*.php',
    'resources/**/*.less',
    'resources/**/*.js',
    'resources/**/*.php',
  ],

  theme: {
    // ...
  },
} 1let defaultConfig = require('tailwindcss/defaultConfig')
 2 
 3module.exports = {
 4  // This is the new section
 5  purge: [
 6    // Your options may vary
 7    'app/**/*.php',
 8    'resources/**/*.less',
 9    'resources/**/*.js',
10    'resources/**/*.php',
11  ],
12 
13  theme: {
14    // ...
15  },
16}

let defaultConfig = require('tailwindcss/defaultConfig')

module.exports = {
  // This is the new section
  purge: [
    // Your options may vary
    'app/**/*.php',
    'resources/**/*.less',
    'resources/**/*.js',
    'resources/**/*.php',
  ],

  theme: {
    // ...
  },
}

You can pass any of the PurgeCSS options you were using with the laravel-mix-purgecss plugin to this too, it just requires a slightly different syntax:

Copied!

1purge: {
2  content: [
3    // an array of files to look for classes in
4  ],
5  options: {
6    // options to be passed directly to PurgeCSS
7  }
8}

purge: {
  content: [
    // an array of files to look for classes in
  ],
  options: {
    // options to be passed directly to PurgeCSS
  }
}1purge: {
2  content: [
3    // an array of files to look for classes in
4  ],
5  options: {
6    // options to be passed directly to PurgeCSS
7  }
8}

purge: {
  content: [
    // an array of files to look for classes in
  ],
  options: {
    // options to be passed directly to PurgeCSS
  }
}

Take a look at your webpack.mix.js file. You should have a chunk like the following:

Copied!

1.purgeCss({
2    // your config options here
3})

.purgeCss({
    // your config options here
})1.purgeCss({
2    // your config options here
3})

.purgeCss({
    // your config options here
})

Pass those same options to the new purge config in your Tailwind config file. Then you can remove them from your webpack config! Note that if you were using the default version of the laravel-mix-purgecss plugin you will need to be explicit about the files you want to search for classes to keep, as tailwind's new purge option doesn't look for any files or directories by default.

For more information, check out the Tailwind docs on Controlling File Size.

Make sure to test that your setup is working by running npm run prod. ✌️

Enjoy this article? Follow me on Twitter for more tips, articles and links.

😢 Awww, nobody has liked or mentioned this on Twitter yet.

Older

« Tailwind Tidbit - Vertically Align Icons and Text in Buttons

Newer

Converting macOS Terminal To zsh in Catalina »

Upgrading Laravel Apps to Tailwind CSS 1.4

Want Updates?