Advantages of using Tailwind CSS JIT mode

[mouakter14]

In this section, we will discuss some of the advantages of using the JIT compiler. These include:

Your stylesheet is the same in development and in production.
Faster build time.
All variants are enabled by default.
Compiling during development is much faster.
Only used styles are generated.
Variants can be stacked.
Improved performance of development tools.
Drawbacks of using Tailwind's CSS JIT compiler
The currently known limitations according to the JIT compiler GitHub documentation are

PurgeCSS advanced options are not supported.
«You can only use @applyclasses that are part of the core, generated by plugins, or defined within a rule @layer. You cannot use @applyarbitrary CSS classes that are not defined within a rule @layer.»
Only PostCSS 8 is supported.
The directive @applyis used to apply utility classes in our custom CSS. This is useful when we are defining custom CSS styles but prefer to make use of some already defined utility classes. Here is an example of how the directive works @apply:

.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
Please note that at the time of writing this article, version 3 of Tailwind CSS 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. All other examples covered in this tutorial are 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 the value 'jit'.

This 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 add

mode: 'jit'
This allows us to use the features of the JIT compiler.

Once this is done, you can run the build command and watch your file size decrease. The only styles you will see will be the ones you are using.

With the reduced file size, your stylesheet during development and indonesia whatsapp number data production will be the same. The chance of development tools lagging will also be minimized and your code will compile faster when building your projects.

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

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

Once this is done, you can run the build command and watch your file size decrease. The only styles you will see will be the ones you are using.

With the reduced file size, your stylesheet during development and production will be the same. The chance of development tools lagging will also be minimized and your code will compile faster when building your projects.

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