What is tailwind just in time mode?

Tailwind comes with a bunch of variations of utilities out the box for example we can use w-2, h-8, left-0.5, rounded-sm and so on to style an elements dimensions, position and appearance. For the most part the out of the box defaults will get you pretty far but there will be moments when a design requires a custom variation.

Tailwind is configurable so we can extend the tailwind configuration to add new variations which is great if you plan to use the variation more than once or twice such as changing theme fonts and colors but for other ui elements in your design you may just need one off variations for example you might have an element that must be 235px wide, which w-... class do we use here? We could add a new w-235px to our configuration but then next week when your designer asks for that element to be 230px wide we now have to update the template and configuration, this can quickly become unmagable for these sort of one off styles.

JIT mode to the rescue! With JIT mode tailwind will dynamically create new variations directly from your template code without adding requiring a variation to be added to the configuration or adding a new css class and using @apply.

To enable JIT mode we have to add the mode property to the tailwind configuration file.

module.exports = {
  mode: "jit", // This enables jit mode
  purge: ["src/**/*.html", "src/**/*.js"],
  theme: { ... },
  variants: { ... },
  plugins: [],
};

With just this small change we can now start adding these one off variations in our templates/components.

<article class="relative w-[150px] h-[100px] p-[15px] rounded-[6px] overflow-hidden shadow-md">
  <img
    class="absolute top-[30px] left-[55px] rounded-full"
    width="40"
    height="40"
    src="/assets/images/badge.png"
  />
  <h1 class="absolute w-[120px] bottom-[10px] left-[15px] text-center">Hello world</h1>
</article>

That’s it! Tailwind will generate classes for your custom variations which you can see below