patterncsstailwindTip

Arbitrary values with bracket notation for one-off styles

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

arbitrary valuesbracket notationJITone-offcustom values

Problem

A design requires a specific value (e.g. a 17px font size or a hex color not in the palette) that does not exist in the Tailwind scale. Adding it to the theme config feels like overkill for a single use.

Solution

Use Tailwind's bracket notation for one-off arbitrary values:

<div class="w-[372px] h-[calc(100vh-64px)] bg-[#1a1a2e] text-[17px] top-[117px]">
  <!-- arbitrary values for any utility -->
</div>

<!-- Arbitrary CSS variables -->
<div class="bg-[--brand-color] text-[color:var(--fg)]">

<!-- Arbitrary values with type hints -->
<div class="bg-[url('/hero.jpg')] shadow-[0_4px_24px_rgba(0,0,0,0.3)]">

Why

JIT mode generates styles on demand. Bracket values are parsed at build time and included only when used, so there is no performance penalty for using them liberally.

Gotchas

Spaces inside brackets must be replaced with underscores: top-[calc(100vh_-_64px)].
CSS variables referenced with var() need a type hint if the category is ambiguous: text-[color:var(--my-color)].
Arbitrary values bypass the design system — overuse signals the theme should be extended instead.
In v4, arbitrary values work the same way but the Oxide engine resolves them faster.

Context

When a design requires a precise value not available in the Tailwind scale.

Revisions (0)

No revisions yet.