JIT Compiler for TailwindCSS is Just AWESOME!

TailwindCSS is definitely one of the great CSS frameworks with powerful features. Although there are people who hate using it for various reasons, I personally love it so much. I don't need to spend a lot of time writing and configuring some variables and base classes, especially for utilities. Besides, it comes with breakpoints configuration and makes writing responsive styling so easy.

Besides all the goodness in TailwindCSS, it also comes with some problems. Its CSS bundle size is really huge, especially during development. The compiler spits out all available classes built-in to TailwindCSS whether they are used or not. It makes compiling time take really long and slow down our development. Well as we already hear from somewhere: "With great power, it comes with great responsibility". As developers, we need to think about how our configuration file fits our needs and it's hard to balance out to TailwindCSS config.

To overcome this problem, TailwindCSS has recently introduced a new compiler which (spoiler) makes compiling process much, much, MUCH faster than ever. Just in Time (JIT) compiler, the new compiler for TailwindCSS brings out some fresh air to us developers. Moreover, we can reduce our configuration file to a bare minimum but still have all the good stuff from it.

What's so great about this new compiler and why should you care?

1. Much faster build time

Previously, I came across with annoying problem that comes from TailwindCSS. It took so long to compile and took so much resources.

Before using JIT, TailwindCSS took around 2GB of ram to compile my code even though I had very minimal configuration. Because of this, the server which hosted my project had trouble building it and always failed because of heap memory allocation. It gave me a headache for a couple of days.

After using JIT, compilation time was reduced a lot and resource usage also was decreased significantly by 1/5 making it only took around 400MB.

This alone is crazy enough, right?

2. No more variants configuration

Before, in some cases, we need to write some configuration manually to enable some features that is not enabled by default. For example, disabled state is not enabled by default, so we need to enable it in our configuration:

Copied to clipboard
variants: {
    backgroundColor: ['disabled'],
},

Imagine we want to have some utility classes with disabled state. We have to put all of the properties in our config which is really boring and time consuming:

Copied to clipboard
variants: {
	accessibility: ['disabled'],
    alignContent: ['disabled'],
    alignItems: ['disabled'],
    alignSelf: ['disabled'],
    animation: ['disabled'],
    ...
}

With JIT compiler, we don't need to write any of those and we can leave our variants config empty and still can use any states such disabled, hover, focus, etc in our code.

But how does TailwindCSS do it? Well, it's all taken cared of by JIT compiler. The compiler will enable those states in run-time whenever it sees them in our code.

3. Custom arbitrary classes without config

As if not good enough and clever enough to see whether we use those states without configuration. We can also make custom utility classes in our code without doing any config either. For example, we want to make a custom text color but we don't want to put it in the config file for some reason, we can make it have that color with TailwindCSS new syntax:

Copied to clipboard
<p class="text-[#3afcd2]">Inline custom color</p>

This is not possible before. In order to have the color #3afcd2, we have to put it in our config. But now, we don't need to. It's not only for colors, we can use the same syntax for some (if not all) TailwindCSS utility classes such as bg-[#3afcd2] or mx-[20px].

4. Compiled to production already

In the development stage, TailwindCSS will spit out every utility classes and it can cause us problems which sometimes hard to debug.

One time, I came across a weird bug where some SVG components in my code didn't have appropriate classes (it affected color in this case). It was fine in development mode but gone in production. I was wondering why did it happen. Turns out, the classes were purge during compilation in production mode.

With JIT compiler, I am more assured that the code produced in development mode will be the same in production. And it only compiles the classes which I put in the code. So, no more bloated classes.

So there is some goodness JIT compiler give and I haven't explored all the good stuff from it.

For now, the JIT compiler can be used as a separate library and install as a plugin but it will come by default in TailwindCSS version 3.

I can't wait to see other awesome stuff from TailwindCSS team since I have completely fallen in love.