JIT (Just In Time) Mode in Tailwind CSS

Hello, I’m Zülal Nebin. For nearly a year, I have been using Tailwind CSS in various projects, as a front end developer at tio. I prefer Tailwind CSS because, among many other benefits, it improves the development experience with JIT mode. 

In this article, I will explain Tailwind by focusing on the JIT mode. Also, I will tell you about usage instances of high customization in case you use ultra-specific design.

What is Tailwind?

Tailwind is a fairly new CSS framework. It is widely preferred by many front end developers today. The reason for this is that it has solved some of the problems experienced in CSS frameworks so far and therefore offers a better developer experience.

One of the first CSS practices was the inclusion of all styles in a single CSS file. Separating this complex method with @import was also a solution that was abandoned after a while because network requests were increasing in number. Instead, various CSS preprocessors such as Sass, less, and stylus became popular. Then, ready-made components and utils classes of CSS frameworks such as Bootstrap, semantic ui were used, and there were custom CSS where these were insufficient. After all this, Tailwind, which entered the world of CSS, basically gives the frequently used values as utils class.

What Are The Benefits Of Tailwind CSS ?

The CSS libraries I use the most in the projects I’ve been involved in lately are Bootstrap and Tailwind, so I will try to explain why I prefer Tailwind over Bootstrap. Performing CSS customizations using the Bootstrap library has some drawbacks because libraries that work with the given components, such as Bootstrap, have pre-styled ready-made components that can be limiting. Developing the desired interface using the given elements is not effective for most projects, and the developer often feels constrained throughout the process. By contrast, with Tailwind:

I can easily do CSS customizations.

Since there is no ui kit, I don’t feel restricted or have to stick with it.

With Pure CSS, I save time because I don’t have to write classes one by one.

What Is JIT Mode in Tailwind CSS?

In fact, before the JIT mode feature, the Purge CSS feature made Tailwind preferred for a long time. Purge CSS cleans up unused CSS classes, resulting in a small clean CSS output. Tailwind 2.1. The Just in time (JIT) mode, which comes with its version, has enabled us to have a CSS framework in which the necessary classes are created directly, instead of removing the unused ones from all classes. It is possible to get very high performance with demand-based class production.

To make custom css configurations, we make changes in tailwind.config.js file.

But we may run into a problem:

If we add styling that is not in the existing Tailwind classes in the config file, but that we need to use only once, with other style extensions, there may be too much code and we can be undecided in naming. Just in time mode is a solution you can use when you encounter this problem.

In summary, Just in Time is a mod that you use when you want to do something extra outside the given Tailwind limits. Thanks to JIT, you can make definitions that are not in your design system.

How To Enable JIT (Just in Time) Mode in Tailwind CSS?

All you have to do is add the mode property to tailwind.config.js file with value “jit”.

Properties of JIT Mode

• no variant configuration needed

You used to customize variants in tailwind.config.js for utilities that do not include ones by default without JIT. With JIT, all variants are enabled by default for all utilities.

• In addition to this, you can combine all variants together instead of customizing css:

• Arbitrary values: We may need too many different values to customize that do not exist on the design system. You can be tired of configuring every custom value one by one in tailwind.config.js. You can figure this problem out by passing an argument into square brackets for every value whatever you want. 

• Dynamic values: Tailwind extracts classes at build time, so you cannot create dynamic classes at runtime. You must use a complete class.

• You can make width and height using calc() with arbitrary values (without space). Moreover, you can define the columns and rows of the grid with comma, not with space into square brackets.

• !important property: you can increase the importance of a property than normal by adding the prefix “!” to any utility name:

! prefix can be applied at end of the variants.

• Opacity shorthand: instead of writing “placeholder-white placeholder-opacity-20” in class you can write “placeholder-white/20”. It is available for text color, background color, placeholder color, border color and ring color.

• You can specify a different border color for each side.

• Pseudo-element: You can use as a variant pseudo-elements like  ::before, ::after, ::marker etc. note: it is available for all pseudo elements.

• Content usage: You can set the content by adding “content-*” property at the postfix before/after variant.

• Sibling selector: You can use peer-* variant for sibling elements like group-* variant.

• no need to add transform utility: You used to add transform utility to be able to use 2d transform properties without JIT mode. 

See the following example project 👇