Understanding the JIT Engine and Arbitrary Values

Tailwind CSS v3 ships with a Just-In-Time (JIT) compiler enabled by default. Instead of generating every possible utility class upfront (which produced multi-megabyte CSS files in v2), the JIT engine watches your template files and generates only the CSS for classes that actually appear. This results in tiny CSS bundles, instant rebuilds, and — critically — support for arbitrary values without any configuration. Arbitrary values are written inside square brackets: w-[347px] generates width: 347px, bg-[#1da1f2] generates the exact hex background color, text-[22px] sets a font size not on the default scale, and mt-[calc(100vh-4rem)] handles complex CSS expressions. This feature eliminates the need to add one-off values to tailwind.config.js just to use them once — you write the value you need directly in the class name. Arbitrary values work with every Tailwind utility that accepts a value: padding, margin, width, height, colors, font sizes, line heights, border radii, z-index, grid templates, transforms, and more. CSS variables are also supported: bg-[var(--brand-color)] lets you use runtime CSS custom properties alongside static Tailwind values. The JIT engine handles all these cases through the same scanning and generation pipeline.

Example

<!-- Arbitrary values: write any CSS value in square brackets -->

<!-- Exact pixel measurements -->
<div class="w-[347px] h-[200px] bg-[#1da1f2] rounded-[14px]">
  Twitter-blue box with exact dimensions
</div>

<!-- Arbitrary colors -->
<p class="text-[#6366f1] font-semibold">Indigo text (#6366f1)</p>
<div class="bg-[hsl(220,90%,56%)] text-white p-4">HSL background</div>
<div class="bg-[rgb(99,102,241)] text-white p-4">RGB background</div>

<!-- Arbitrary with opacity modifier -->
<div class="bg-[#1da1f2]/20 text-[#1da1f2] font-bold p-3 rounded-lg">
  20% opacity tint of a brand color
</div>

<!-- Complex CSS values -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
  <div class="bg-gray-100 p-4">1fr</div>
  <div class="bg-gray-200 p-4">2fr</div>
  <div class="bg-gray-100 p-4">1fr</div>
</div>

<!-- calc() arbitrary value -->
<aside class="w-[calc(100%-2rem)] lg:w-[calc(33.333%-1rem)]">
  Sidebar with calc-based width
</aside>

<!-- CSS custom property in class -->
<button class="bg-[var(--brand-primary)] text-white px-4 py-2 rounded">
  Uses CSS variable
</button>

<!-- Arbitrary z-index -->
<div class="z-[9999] fixed top-0 left-0">High z-index overlay</div>

<!-- Arbitrary line-height -->
<p class="text-base leading-[1.75] text-gray-700">
  Custom 1.75 line height for comfortable reading
</p>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned