Arbitrary Values and Properties

7 min read

Escaping the Scale with [ ]

Sometimes a design calls for a value that does not exist in the scale. Tailwind lets you use any CSS value inside square brackets — called arbitrary values.

html

<div class="w-[340px] h-[52px] bg-[#1a1a2e] top-[117px]">
  Custom-sized element
</div>

You can also write arbitrary CSS properties with the [property:value] syntax.

html

<div class="[mask-type:luminance] [grid-template-columns:1fr_2fr_1fr]">
  Advanced layout
</div>

Arbitrary values are a useful escape hatch, not a crutch. If you use the same arbitrary value repeatedly, add it to @theme as a token instead.

Ready to test yourself?

Practice Tailwind CSS— quiz & coding exercises