What is JIT in Tailwind CSS?

What is JIT?

Since v3, JIT has been the default in Tailwind CSS, bringing significant power to the framework. One of the best additions are arbitrary values, which let you replace custom CSS with Tailwind CSS-like classes.

_Note: Any use of an _ in the class name adds a space, as you can't use spaces within JIT classes._

Arbitrary Values without JIT

<div class="floating-alert absolute p-4">Hello World! 👋</div>

And for the CSS...

.floating-alert {
  bottom: 5px;
  right: 5px;
}

Arbitrary Values with JIT

<div class="absolute bottom-[5px] right-[5px] p-4">Hello World! 👋</div>

The benefit here is keeping everything within the HTML, which means:

• Less switching between files
• No need to update Tailwind CSS config
• Easy use of Tailwind CSS breakpoints top-[2px] sm:top-[3px] lg:top-[5px]

Outside CSS Properties

Although Tailwind CSS covers many CSS properties, there may be times when it doesn't cover everything you need. With some JIT usage, you can write that CSS without leaving your HTML file, keeping it in the Tailwind CSS style.

[column-fill:_balance]
[image-rendering:_pixelated]
[image-rendering:_auto]
[&_summary::-webkit-details-marker]:hidden

Targeting Elements

You can use a JIT class to target specific child elements, saving you from copying and pasting the same classes multiple times.

[&_input]:rounded-md
[&:hover>li]:opacity-50

Custom Background Images

Instead of adding background images in a style attribute on the HTML element, you can do it through Tailwind CSS.

bg-[url(https://source.unsplash.com/random)]

This also works for gradients.

bg-[linear-gradient(180deg,_#eab308_49.9%,_#a855f7_50%)]

With Variables

You can use JIT with CSS variables applied to the element. This can be useful when setting up dynamic grids or progress bars. For example: