DEV Community


What is TailwindCSS JIT and how to use it

elianvancutsem profile image Elian Van Cutsem Originally published at Updated on ・3 min read

Yesterday the TailwindCSS blog published an article about a new feature they released called TailwindCSS JIT (which stands for Just-In-Time). For now it's still an experimental feature, but it has worked great for me.

What is tailwindcss/jit

tailwindcss/jit is a just-in-time compiler for TailwindCSS. Yesterday Adam Wathan(creator of TailwindCSS) posted a video on Youtube explaining the basics of @tailwindcss/jit and how to use it.

Before this package got release Tailwind would add all classes to a compiled CSS file or you had to specify and disable exactly what variants and classes you would be using. If you enabled everything, the file would increase to enormous sizes. Which made development and compiling very slow. They added purging to decrease the file size, but the slow compiling and lots of configuring were still remaining problems. For example: if you enabled dark mode classes, the CSS file in development would almost double, since it added light and dark mode variant of all classes. in JIT, all variants are enabled by default, but only those you use are added to the compiled CSS. Thanks to this, we see an enormous improvement in compiling speed and browser performance in development.

How to use it

@tailwindcss/jit is actually very easy to install and setup. It even makes the whole configuration easier.

Installing it

Installing @tailwindcss/jit is actually very easy.

yarn add -D @tailwindcss/jit
Enter fullscreen mode Exit fullscreen mode

Configuring PostCSS to use JIT instead of TailwindCSS

Now we can tell PostCSS to use JIT instead of 'normal' TailwindCSS by changing require('tailwindcss') to require('@tailwindcss/jit')

// postcss.config.js
module.exports = {
  plugins: [
Enter fullscreen mode Exit fullscreen mode

Using it

@tailwindcss/jit doesn't require a whole configuration for variants colors since it won't add the utility-classes that aren't used anyway to the compiled CSS file and only compiles the used classes. Below is a configuration before the use of @tailwindcss/jit

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
Enter fullscreen mode Exit fullscreen mode

You had to specify every variant you were using because if it enabled every class, your compiled CSS file would be over 10MB in CSS. Which didn't work great for slower internet speeds. They solved part of the problem by using PurgeCSS to only include used CSS in the compiled CSS file, which already shrank the compiled CSS a significant lot (if everything was configured correctly). But now everything got so much easier. Now we can remove the whole variants part and only use our configuration to specify our own utilities or theme.

Below is an example of a full configuration with @tailwindcss/jit:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: [
  darkMode: 'class',
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
  plugins: [
Enter fullscreen mode Exit fullscreen mode

Depending on your specific situation you might need to change a few other things.

I also wrote a blogpost on how to use JIT with Nuxtjs.

In my specific situation this is how @tailwindcss/jit affected my development process:

Work project:

package compiling time compiled filesize
TailwindCSS 25328ms 918KiB
@tailwindcss/jit 10295ms 84KiB

on this very website:

package run side compiling time
TailwindCSS 1st client 28.73s
TailwindCSS 1st server 24.58s
TailwindCSS 2nd client 18.31s
TailwindCSS 2nd server 15.60s
@tailwindcss/jit 1st client 10.07s
@tailwindcss/jit 1st server 9.19s
@tailwindcss/jit 2nd client 4.98s
@tailwindcss/jit 2nd server 4.22s

this was measured on 1st and 2nd run with viewer option disabled

Discussion (0)

Editor guide