How to use Tailwind CSS v2.1 JIT compiler with Laravel Mix

Published April 12, 2021; last updated on November 30, 2021
How to use Tailwind CSS v2.1 JIT compiler with Laravel Mix

Last week Tailwind CSS released version 2.1.0. One of the best features of the release is the fact that the new Just-In-Time (JIT) compiler is now included in the official build. In this tutorial I’ll show you how to use the Tailwind CSS JIT compiler with Laravel Mix. Best of all is that it takes less than two minutes🚀

The compiler is a huge step forward in the development of Tailwind CSS. There are several important advantages, but perhaps the most notable is the lightning fast build times. We’re talking milliseconds here, rather than 8-10 seconds.

An other advantage is that all variants are now available automatically and that you don’t have to specify which variants to use anymore. And it allows you to generate very specific utilities like mt-[82.5px] without having to declare them yourself. Exciting, right?

Updating Tailwind CSS to v2.1

For this tutorial I’ll assume that you’ve already installed Tailwind CSS in your project. If not, follow the steps in this article and then come back.

Open your Terminal and run the following command to update to Tailwind CSS version 2.1:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Updating Tailwind CSS to the latest version to install the JIT compiler.
Updating to Tailwind CSS 2.1 from 2.0.3.

Great! Now you’ve the latest version of Tailwind CSS installed in your project.

Enabling the JIT mode

Now open up your tailwind.config.js file and add the following line:

 mode: 'jit',

Make sure to correctly configure the purge option so that it points to all the files that could possibly contain CSS classes. Remove all the variants inside extend, as those are now enabled by default. Save the file. My tailwind.config.js now looks like this:

module.exports = {
  mode: 'jit',                           //ADD THIS LINE
  purge: [                               //CONFIGURE CORRECTLY
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './config/*.php',
  ],  
  darkMode: false,
  theme: {
    extend: {
    },
  },
  variants: {
    extend: {                             //REMOVE EVERYTHING HERE
//      padding: ['first', 'last'],
//      margin: ['first', 'last'],
//      outline: ['hover', 'active'],
//      ringWidth: ['hover', 'active'],
//      ringColor: ['hover', 'active'],
//      backgroundColor: ['checked'],
    },
  },
  plugins: [],
}

Now Tailwind is configured to run the Just-In-Time compiler. 🎉

Configuring Laravel Mix

The last step you need to take is configuring Laravel Mix. Open your package.json and look up the part with scripts:

    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },

You have two choices here:

  1. Minify the CSS output (better debugging) – yes or no; and
  2. Watch your files for changes and immediately recompile the CSS or do a one-off build; yes or no.

I’ll configure the following set-up:

  1. npm run dev: don’t minify CSS and do a one-off build.
  2. npm run prod: minify CSS and do a one-off build.
  3. npm run watch: don’t minify CSS and recompile CSS on every change.

Configuring npm run dev

The npm run dev or npm run development command (the former is an alias of the latter, so both are equal) doesn’t minify CSS but it still tries to watch the files. Fix that by adding TAILWIND_MODE=build to the development command so that id does one-off builds.

        "development": "TAILWIND_MODE=build mix",

Configuring npm run prod

The npm run prod or npm run production (the former is again an alias of the latter) is already configured to minify output and to do one-off builds. We don’t have to do anything about that.

Configuring npm run watch

The npm run watch command (or npm run hot in some cases), is also configured not to minify CSS and to watch for file changes.


Testing🚀

Save your package.json and test the compiler. As you see, each command should just work🎉 If you have any questions or suggestions, feel free to leave a comment below👇

Stay up to date with all things Laravel, Tailwind, WordPress & PHP

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.

Image Ralph J. Smit
Ralph is a designer gone developer. He happily lives in the Netherlands. His passion for good design drove him towards development, because he felt that no-code tools were too limiting. On this blog, Ralph writes the articles he would've wanted to have during his continual developer journey. → Follow on Twitter

Comments

  • Kingsley Uchenna Ezeh

    September 25, 2021

    Thanks for this, was really helpful Ralph

  • Jarno

    August 26, 2021

    Great post Ralph! I encounter one issue. When I run npm run watch, Laravel Mix keeps compiling every second. Any idea how to prevent this from happening? I already added this to my webpack.mix.js configuration: .options({ processCssUrls: false })

    • Ralph Smit

      August 31, 2021

      Hey Jarno, thanks! That's a weird error. Do you mind sharing your webpack.mix.js and package.json?

    • Dave

      October 1, 2021

      I had the same problem. You probably have some issues with the way purging is set up in your tailwind config file. In my case, it was this super generic glob `./*.php` that caused the problem. I'd suggest you remove all globs and add them one by one to identify the problematic one(s) and try to make the entries more specific. You can find more information about infinite loops in the official doc: https://tailwindcss.com/docs/just-in-time-mode#styles-rebuild-in-an-infinite-loop

      • Ralph Smit

        October 2, 2021

        Hey Dave, that's smart! Thanks for sharing how you fixed it💪

  • Doug

    July 14, 2021

    Nice write up Ralph, cheers.

    • Ralph Smit

      July 15, 2021

      Hey Doug, thank you! Happy to hear that😄

Leave a reply

Your email address will not be published. Required fields are marked *

Close
Do you want more articles like this delivered straight to your inbox?

Subscribe now to my e-mail newsletter and get my latest articles and project updates delivered directly to your inbox. Never miss an update.