Arbitrary values and properties

Tailwind's scale covers most needs, but sometimes you need an exact value from a design: exactly 350 pixels wide, or the brand color #1da1f2. For that the value goes into square brackets right in the class — an arbitrary value.

A value in brackets

After the utility prefix you put brackets with any valid CSS value:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="w-[350px] rounded-[10px] bg-[#1da1f2] p-[18px] text-white">
  Exactly 350px wide
</div>

Tailwind generated the classes on the fly: width: 350px, border-radius: 10px, the background color and the padding. top-[117px], text-[22px] and grid-cols-[240px_1fr] work the same way.

Spaces and functions

A class name cannot contain spaces, so an underscore stands in for them. CSS functions work inside the brackets:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="grid grid-cols-[120px_1fr] gap-3">
  <img src="/media/photo-200x200.jpg" alt="Headphones" class="rounded-lg">
  <div class="h-[calc(100%-1rem)] rounded-lg bg-gray-100 p-3">Product description</div>
</div>

The first column is 120 pixels wide, the second takes the rest. Inside calc() the spaces around the minus are added automatically.

CSS variables

When the value lives in a CSS variable, write it in round brackets without var():

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div style="--brand: #16a34a">
  <button class="rounded-lg bg-(--brand) px-4 py-2 text-white">Buy</button>
</div>

bg-(--brand) becomes background-color: var(--brand). This way the button color can be changed from JavaScript or a CMS. In Tailwind 3 the same was written as bg-[--brand].

Arbitrary property

When there is no utility for a CSS property at all, write the whole thing in brackets: [property:value]:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="[writing-mode:vertical-rl] bg-amber-100 p-2">New</p>

The text is rotated vertically. Variants work here too: hover:[writing-mode:horizontal-tb].

Arbitrary variant

A selector can also go in brackets, with & standing for the element itself: [&>li]:py-2 adds padding to all direct li children. For the common case there is a ready *: variant — it applies a utility to all direct children.

Common mistake

Replacing the whole scale with brackets:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="p-[15px] text-[17px] mt-[13px]">Headphones</div>

It works, but the page loses its consistent rhythm: sizes that are "almost on the scale" do not fit well with the rest. Brackets are for exceptions from the design. If a value repeats, add it to the theme with @theme — the next lesson.