Tailwind CSS has recently released a new version of 3.0 and it has included many great and powerful new features including new just-in-time (JIT), scroll snap API, new modifier and etc. Today, we will take a quick look at what is the new Just-in-time engine and why it is so important for all Tailwind CSS’s consumers.
What is Tailwind CSS?
If you have never tried Tailwind CSS, it is a collection of opinionated CSS utility classes which allow developers to build the website in a more efficient way. The low-level CSS framework allows you to build a design system with constraints and consistency without wasting or polluting your styles.
What is Just-in-Time?
The classic engine of Tailwind CSS is taking a long time to precompile all CSS classes in advance when developing. Because of the huge CSS classes, it also caused some performance impact in the browser console.
Meanwhile, the new Just-in-time engine allows Tailwind to build the CSS classes on demand and it only generates the CSS classes that are being used. Thus, a smaller CSS file is required as well as much lesser time to compile and preview.
Why Just-in-Time?
Besides lightning-fast build speed and performance boost, the Just-in-Time engine also enables a few exciting features:
All variants are worked out of the box
Due to file size considerations, most of the variants like disabled and active are disabled by default, but with the new JIT engine, where the compilation is on-demand, you can now add any variants without the need of configuring your variants again.
Arbitrary Value Support
If you ever need a custom CSS value that isn’t part of Tailwind CSS, you do not need to write a custom CSS for it. For example, if you want to set the image height to “150px”, you can just add h-[150px] and Tailwind will generate the right CSS class for you. It also works with variants and emojis too, like before:content-['🤪'].
Development styles are the same as production styles
Unlike the purging method used by Tailwind CSS previously, which removes unused styles in production. The new JIT engine is detecting the used classes and generates the styles while you develop. Thus, you do not need to worry about the difference between development and production and avoid any surprises when deploying to production.
How to use Just-in-Time?
If you are using Tailwind 2.1+, you can enable JIT by adding mode: 'jit' in your tailwind.config.js:
// tailwind.config.js
module.exports = {
mode: 'jit',
// Other configs
}If you are using Tailwind 3.x, JIT is enabled by default and you are able to enjoy the benefits from it right away.
Let’s see them in action
First, let’s test the compilation speed of the JIT engine.
We can see the initial compilation speed took around 185ms and the subsequent compilation is only took around ~20ms, which is very fast.
Next, we want to add ✅ symbol before the title to make it less boring. Without the JIT engine, we may need to create a custom CSS class to achieve this. However, JIT allows us to add custom styles without needing custom CSS classes. The idea is to place the value you need in a square bracket. Here, we can add before:content-['✅'] in the title’s class.
One note is that you must not have any spaces in arbitrary value, for example, if you want to create a custom grid column like grid-template-columns: auto, minmax(0, 1fr), auto, minmax(0, 1fr), you need to write it without any spaces, like grid-cols-[auto,minmax(0,1fr),auto,minmax(0,1fr)]. Otherwise, Tailwind will not able to compile the class properly for you.
Now, let’s try to add another variant, lets say, we want to change the text selection background color to red color. What we can do is directly add selection:bg-red-400. and do not need to worry if the variant has been configured.
Conclusion
In this post, we have roughly gone through how Tailwind CSS JIT works and what benefits it can bring to us. In my opinion, JIT is definitely a great enhancement for Tailwind and you should enable it in your project whenever possible because it will speed up and improve your development experience.
