Setting the Just In Time mode in Tailwind CSS

Using the JIT compiler in Tailwind CSS

Published June 11th, 2021

Important: The information in this article is over 12 months old, and may be out of date or no longer relevant.

But hey, you're here anyway, so give it a read see if it still applies to you.

Tailwind CSS is so refreshing for building modern and responsive websites, and with PurgeCSS for deployment, can produce slick and tiny production CSS files. However, the development build is anything but… we’re talking 3MB+. Add a few plugins, colours and variants and boom, 5MB. Yikes. This is because Tailwind CSS’s development build includes all of the different possible combinations of the classes that you may need… even when in reality your app only need a handful.

While a large CSS file for development doesn’t sound like a big deal, after all, server speed or bandwidth isn’t really a consideration for local development, I did start to encounter issues with such large CSS files and Inspect Element: a critical tool for dev work. Most notably in Firefox, performance of the browser would start to become hideously slow. Like hang the browser kind of slow. Refreshing the page would take an inconveniently excessive amount of time, and the development experience started to become frustrating. Even trying other browsers, the performance just wasn’t great.

Enter the JIT compiler mode.

Tailwind CSS 2.1 includes a preview of the new JIT (Just In Time) compiler which is more like a development-friendly production build that only includes your used classes (rather than the default development build that includes every single class combination - just in case you need it). Your file size goes from measured in MB back down to single-digit KB. At the very worst, double-digit KB.

But wait, what happens when I add a new class? Do I need to re-compile?

Thankfully, no.

When running your build step - as a watch, not a once-off - the process is monitoring your watched files - be that .vue, .antlers.html, .blade.php, .js - whatever your tailwind.config.js is configured to do - and adds newly used classes as you add them to your files. For example, add a new class to your Vue component, the new class gets added to your CSS file, Just In Time. Get it?

Think of it as an on-demand compiler.

So, how do you actually use the JIT compiler?

It’s so insanely easy to give it a go - simply update your tailwind.config.js’s mode to be be jit. Yeah, that’s it.

1/* tailwind.config.js */
2module.exports = {
3    /* ... */
4    mode: 'jit',
5    /* ... */
6}

Copied!

Run your build process and see your development CSS file strip in size. Set your process to keep running in the background, and you’re all set.

The Tailwind CSS JIT compiler mode is such an awesome addition:

faster initial build time
lightning-fast on-demand incremental adding of new classes
reduced CSS file size for development (keeping browser inspection tools happier)
more representative of your production build

This has been such an insanely beneficial feature, and since using it on a good half dozen projects, have encountered no issues or unexpected behaviour. When building for production, you still get your super slim CSS files, but during development, you get faster more memory-friendly CSS files that still harness all of that Tailwind CSS magic but without the excessive file size. Give the JIT compiler a go and see how your browser behaves.

And as always, don't forget to check out the JIT mode documentation for Tailwind CSS.

Using the JIT compiler in Tailwind CSS

You may be interested in...