iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Arbitrary Values

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Arbitrary values let you reach for a one-off design value without leaving your utility classes or extending the theme. The syntax is square brackets — `top-[117px]`, `bg-[#0c3a86]`, `grid-cols-[200px_1fr]`. Use them for genuine one-offs; if the same value appears more than twice, promote it to the theme.

Arbitrary values, variants, and properties

EXAMPLE
<!-- 1) Arbitrary lengths and colours -->
<div class='top-[117px] left-[12.5%] bg-[#0c3a86] text-[clamp(1rem,2vw,1.5rem)]'>
  Pixel-perfect overlay
</div>

<!-- 2) Arbitrary grid templates (note underscores for spaces) -->
<div class='grid grid-cols-[200px_minmax(0,1fr)_auto] gap-[1.25rem]'>
  <aside>nav</aside><main>content</main><aside>tools</aside>
</div>

<!-- 3) Arbitrary properties — for things Tailwind does not ship a utility for -->
<div class='[mask-image:linear-gradient(to_bottom,black,transparent)]
            [scroll-snap-type:y_mandatory]
            [backdrop-filter:blur(8px)]'>
  Fades at the bottom, snaps on scroll
</div>

<!-- 4) Arbitrary variants — target any selector inline -->
<a class='text-blue-600 [&:nth-child(3n)]:text-pink-600
          [&[data-state=open]]:underline
          [&_svg]:size-4'>
  Every 3rd link is pink, opens get underlined, child svgs sized
</a>

<!-- 5) CSS variables play nicely with arbitrary values -->
<div style='--brand:#16a34a' class='bg-[var(--brand)] text-[color:var(--brand)]'>
  Theme via CSS vars
</div>

<!-- 6) Use the type hint when the engine cannot infer the property -->
<div class='[--ring-color:theme(colors.blue.500)]
            shadow-[0_0_0_3px_var(--ring-color)]'></div>

Why it matters

Arbitrary values are an escape hatch, not a strategy. The moment you repeat one across files, lift it into tailwind.config.js theme.extend so it gets a stable name and shows up in autocomplete. Otherwise your "design system" slowly becomes a hex-code grep.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="w-[37rem] mt-[7px] bg-[#04AA6D]">Anything fits.</div>
Try it Yourself »

Discussion

Loading…