Arbitrary Properties and CSS Variables in Classes

Full CSS Power Inside Utility Classes

Arbitrary values (w-[340px]) handle one-off lengths and colors. Arbitrary properties go further — they let you set any CSS property that Tailwind does not have a built-in utility for, right in your HTML.

Arbitrary Property Syntax

Wrap the full property:value pair in square brackets. Use underscores where you need literal spaces inside the value.

<div class="[mask-type:luminance]
            [grid-template-columns:200px_1fr_1fr]
            [content-visibility:auto]
            [scroll-snap-type:x_mandatory]">
  Advanced CSS applied inline
</div>

Reading CSS Custom Properties in Arbitrary Values

You can reference CSS custom properties (variables) inside arbitrary brackets. This is useful when the value comes from a design token that is not in @theme.

<div class="bg-[var(--my-brand-color)] h-[var(--hero-height,80vh)]">
  Token-driven arbitrary value
</div>

Modifiers on Arbitrary Properties

Arbitrary properties combine with all standard Tailwind modifiers — responsive prefixes, state variants, and dark:.

<div class="[clip-path:polygon(0_0,100%_0,80%_100%,0_100%)]
            md:[clip-path:polygon(0_0,100%_0,90%_100%,0_100%)]
            dark:[background:linear-gradient(135deg,#1e293b,#0f172a)]">
  Responsive arbitrary clip-path with dark variant
</div>