Arbitrary Values and Their Cost
Use bracket notation like w-[347px] for one-off values and understand the trade-off between flexibility and a potentially bloated stylesheet.
What Are Arbitrary Values
Tailwind's arbitrary value syntax lets you use any CSS value directly inside a class name using square bracket notation. Instead of being limited to Tailwind's preset scale, you can write w-[347px], text-[#1a2b3c], or grid-cols-[1fr_2fr_1fr].
This feature, enabled by the JIT engine, is one of Tailwind's most powerful capabilities. It bridges the gap between utility classes and the rare cases where a precise, off-scale value is genuinely needed.
<div class="w-[347px] h-[calc(100vh-64px)] bg-[#1a1a2e] text-[#e2e8f0]">
Arbitrary values for precise control
</div>
<div class="grid grid-cols-[1fr_2fr_1fr] gap-[22px]">
Custom grid layout with arbitrary columns
</div>Syntax Reference for Arbitrary Values
The bracket syntax works with any Tailwind utility prefix. The value inside the brackets is passed directly as the CSS value. Spaces within the value are represented by underscores (Tailwind replaces them before parsing).
For utilities that generate multiple CSS properties, only the relevant property receives the arbitrary value. For example, p-[12px] sets all four padding values to 12px, just like p-4 but with a custom value.
<!-- Width and height -->
<div class="w-[240px] h-[180px]"></div>
<!-- Custom color -->
<div class="bg-[#f0a500] text-[#2d3748]"></div>
<!-- Calc values -->
<div class="top-[calc(50%_-_24px)]"></div>
<!-- CSS variables -->
<div class="bg-[var(--primary-color)]"></div>
<!-- Custom grid -->
<div class="grid-cols-[200px_1fr_minmax(200px,_1fr)]"></div>
<!-- Spacing with custom value -->
<div class="mt-[7px] px-[18px]"></div>All lessons in this course
- How the JIT Engine Works
- Safe-Listing Dynamic Classes
- Analyzing and Reducing Bundle Size
- Arbitrary Values and Their Cost