What are Arbitrary Values in Tailwind?

Using custom one-off values.

What You'll Learn

Arbitrary value syntax
When to use them
Common patterns

Basic Syntax

index.htmlHTML

<div class="w-[137px]">Exact width</div>
<div class="mt-[23px]">Exact margin</div>
<div class="bg-[#1da1f2]">Exact color</div>

Various Properties

index.htmlHTML

<!-- Sizing -->
<div class="w-[calc(100%-2rem)]">Calculated width</div>

<!-- Colors -->
<div class="text-[#ff6b6b]">Custom color</div>
<div class="bg-[rgb(255,107,107)]">RGB color</div>

<!-- Spacing -->
<div class="p-[clamp(1rem,5vw,3rem)]">Clamp padding</div>

<!-- Grid -->
<div class="grid-cols-[200px_1fr_200px]">Custom grid</div>

Arbitrary Properties

index.htmlHTML

<div class="[mask-type:luminance]">
  Any CSS property
</div>

<div class="[--my-var:10px]">
  CSS custom property
</div>

When to Use

One-off exact values needed
Design spec has specific pixels
Complex calculations
Avoid for repeated values (extend theme instead)

How to use Container in Tailwind CSS?

How to use !important in Tailwind?