Arbitrary Values

Use bracket notation for one-off custom values

When Tailwind does not have a utility for your exact value, use bracket notation to set any CSS value inline.

Use bracket notation for exact pixel values not in the default scale.

137 x 42

w: 137px

h: 42px

p: 13px

Tailwind CSS

<div class="w-[137px] h-[42px] p-[13px]">
  Exact 137x42 with 13px padding
</div>

<!-- Also works with other units -->
<div class="w-[50vw] h-[calc(100%-2rem)]">
  Viewport and calc() values
</div>

26 / 35