Arbitrary values and properties
When a design requires a value outside the standard scale, Tailwind supports bracket notation for many utilities, such as w-[37rem], grid-cols-[220px_minmax(0,1fr)], or top-[var(--header-height)]. Arbitrary values are useful for precise exceptions, but frequent one-off values may indicate a missing design token.
Spaces in arbitrary values often use underscores in class syntax. Follow the exact syntax supported by your Tailwind version, especially for CSS functions and custom properties. Avoid placing user-controlled input directly into class names.
A custom grid track and CSS variable
<div style="--sidebar-width: 14rem" class="grid grid-cols-1 gap-5 lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)]">
<aside class="rounded-xl border p-4">Sidebar</aside>
<main class="min-w-0 rounded-xl border p-4">Main content</main>
</div>đź’ˇ The custom grid template gives the sidebar a variable width and lets the main content consume the remaining space. The single-column base layout remains usable on small screens. For repeated use, define the variable in a stable design-token layer rather than repeating inline styles.
Key Takeaways
- Use arbitrary values for real exceptions, not every value.
- Use underscores where arbitrary-value syntax needs spaces.
- Promote repeated one-off values into reusable design tokens.