Master Tailwind CSS With Its Just-in-Time (JIT) Mode

Utility-first frameworks help us design our web pages faster, and Tailwind CSS has become one of the most popular ones. But being popular doesn’t mean perfection.

There were a few challenges in using Tailwind CSS, like having a huge stylesheet during development and having to enable extra variants on our own, among others. A solution to some of these challenges will be our general focus in this tutorial.

In this tutorial, we’ll talk about a very important feature of the Tailwind CSS framework known as the just-in-time compiler, more commonly referred to as the JIT compiler.

We’ll highlight the features and benefits of using the Tailwind CSS JIT compiler, how to enable it, and see some practical examples.

Let’s get started.

What Is Tailwind CSS JIT (Just-in-Time) Compiler?

Before we talk about the just-in-time compiler, we first need to talk about Tailwind CSS.

Tailwind CSS is a utility-first CSS framework with a set of predefined CSS classes that can be applied directly in our markup to speed up the design of web pages and maintain consistency in design using predefined systems.

Prior to the release of the JIT compiler, our generated Tailwind CSS file size after installation is usually up to 3 MB. As you continue to configure and customize Tailwind, though, the file size keeps getting bigger — in some cases, you can end up with a stylesheet as big as 15 MB.

Although all our unused styles will be purged during production, this is not the case during development. With a stylesheet as big as 10 MB or even 20 MB, we’re bound to run into problems and cause our dev tools to lag.

With the JIT compiler, styles are generated as we build our projects. This means that only the utility classes you’re currently making use of will be included in the size of your stylesheet, not all the utility classes that come with Tailwind CSS.

Benefits of Using Tailwind CSS JIT Mode

In this section, we’ll discuss some of the benefits of using the JIT compiler. They include:

1. Your stylesheet is the same in development and production.
2. Faster build time.
3. All variants are enabled by default.
4. Compilation during development is much faster.
5. Only used styles are generated.
6. Variants can be stacked.
7. Improved dev tools performance.

Drawbacks of Using Tailwind CSS JIT Compiler

The currently known limitations according to the JIT compiler GitHub documentation are:

• Advanced PurgeCSS options aren’t supported.
• “You can only @apply classes that are part of core, generated by plugins, or defined within a @layer rule. You can’t @apply arbitrary CSS classes that aren’t defined within a @layer rule.”
• There is only support for PostCSS 8.

The @apply directive is used to apply utility classes in our custom CSS. This is useful when we’re defining custom CSS styles but’d prefer making use of some already defined utility classes.Here is an example of how the @apply directive works:

.my-custom-css {
  @apply text-green-500;
}

In the code above, we added a green color to a custom CSS class. The green color was applied using a Tailwind utility class.

How to Enable Tailwind CSS JIT Mode

Note that as at the time of writing, Tailwind CSS version 3 has already been released and is enabled by default when you install Tailwind CSS. The explanations below for enabling the JIT compiler do not apply to version 3 and above. Every other example covered in this tutorial is compatible with version 3.

It’s pretty easy to enable the JIT compiler. All you have to do is update your tailwind.config.js file by adding the mode property which should have a value of ‘jit’.

Here is what your tailwind.config.js should look like:

module.exports = {
  mode: 'jit',
  purge: ['./public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

The line to focus on is the part where we added:

mode: 'jit'

This enables us to use the features of the JIT compiler.

After that’s done, you can run the build command and see your file size diminish. The only styles you’ll see will be the ones you’re making use of.

With the reduced file size, your stylesheet during development and production will be the same. The possibility of the developer tools lagging will also be reduced to the minimum and your code compiles faster as you build your projects.

Next, we’ll see some practical applications of the JIT compiler.

This enables us to use the features of the JIT compiler.

After that’s done, you can run the build command and see your file size diminish. The only styles you’ll see will be the ones you’re making use of.

With the reduced file size, your stylesheet during development and production will be the same. The possibility of the developer tools lagging will also be reduced to the minimum and your code compiles faster as you build your projects.

Next, we’ll see some practical applications of the JIT compiler.

How to Use Tailwind CSS JIT Compiler

We’ll see some practical examples of the JIT compiler in this section. We’ll begin with arbitrary values which help us extend Tailwind’s design system.

Arbitrary Values

Cases may arise where we’d rather use values outside the already created design system. These values may be for our colors, padding, margin, width, and so on.

The JIT compiler enables us to achieve this with the use of arbitrary values. These arbitrary values allow us to break out of the design system and define our own custom values.You’d see these values in this syntax: [300px], [#FA8072].

In order to do this, we must nest the value in square brackets so that Tailwind knows we are defining new values in our design system. Here’s  an example below:

<div class="mt-[300px] w-[500px]">
</div>

In the example above, we have used two new values — 300px and 500px — which didn’t exist in the design system initially. Prior to the JIT compiler, you’d probably have to first define these values in the config.js file to achieve this same effect.

The next example shows how you can define new color values as:

<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Here, we have created a paragraph with a salmon background color. You wouldn’t see a Tailwind utility class that says bg-salmon, but we’re able to define this using an arbitrary value.

Stackable Variants

With the JIT compiler, all variants are enabled by default so you can forget about using the config.js file to enable any. In addition to this, variants can be stacked to achieve awesome results.

Each variant is separated by a colon.

Here is an example:

<button class="sm:dark:disabled:focus:hover:bg-blue-300">

The code above creates a button with the focus property disbaled and turns blue when hovered on.

Pseudo-Elements

The JIT compiler allows us to style pseudo-element. Pseudo-elements are used to style specific parts of an element such as styling the first letter of an element or inserting content before/after an element.

Here are a few examples:

<p class="first-letter:bg-green-600">
First letter will have a green color
</p>

In the example above, the first letter “M” will have a green color.

<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>

When you highlight the text from the code above, it will have a green background color.

Per-Side Border Colors

Due to file size considerations, this feature was left out initially, but that changed with the release of the JIT compiler. We can give each border a different color.

Let’s see an example of this:

<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>

We have given our div multiple border colors — the top border is red, the right border is blue, the bottom border is yellow, and the left border is green.

JIT Mode in Tailwind CSS Version 3

From Tailwind CSS version 3 and above, the JIT compiler is enabled by default when we install Tailwind CSS so we don’t have to worry about altering anything in the tailwind.config.js file. This enables us to access all the features of the JIT compiler on the go. All we have to do is follow the installation instructions for the current version, and we’re off and running.

Summary

The JIT compiler took the Tailwind CSS framework to a whole new level. Its release came with new helpful features to make our use of the framework better. We no longer have to worry about our file size being so heavy they make our dev tools lag, since only the styles we actually use are generated, all on the go.

We saw a few examples of the new features like stacking variants, styling elements using pseudo-elements, using arbitrary values to extend our design system and the very much demanded feature — the ability to style each side of an element’s border individually. We’ve far from reached the limitations of Tailwind’s JIT capabilities here, so your next steps will be to test for yourself and explore how you can best harness JIT’s features for your own work.

What cool stuff have you built utilizing the JIT compiler? Share your thoughts in the comments below.