Arbitrary Values

Definition

Using square brackets to generate hyper-specific, one-off utility classes on the fly without having to add them to `tailwind.config.js`.

Explain Like I'm New

Tailwind has `top-4` (16px) and `top-5` (20px). If you desperately need exactly 17px for a weird alignment issue, you don't need to write inline CSS. You just type `top-[17px]`. The JIT engine instantly creates that custom class.

Real World Example

Creating a highly specific branding color for a single landing page without polluting the global config file: `bg-[#1da1f2]` (Twitter blue).

Common Use Cases

•One-off highly specific values
•Dynamic CSS grid layouts (`grid-cols-[1fr_500px_2fr]`)

Interactive Example

Interview Questions

basic

What characters are used to denote an arbitrary value in Tailwind?

intermediate

When should you use an Arbitrary Value instead of updating the `tailwind.config.js`?

Flash Cards

Question

Which characters?

Click to reveal answer

Answer

Square brackets `[]`.

Question

When to use?

Click to reveal answer

Answer

Use arbitrary values for 'One-off' magic numbers that you only ever plan to use once in your entire app. If you plan to reuse the value (like a brand color), put it in the config file.