Why arbitrary values exist in Tailwind - Browser Rendering Impact

Render Flow - Why arbitrary values exist

[Write Tailwind class] -> [Parse class name] -> [Check predefined scale] -> [Not found?] -> [Parse arbitrary value] -> [Apply CSS with custom value] -> [Render element]

Tailwind reads each class name, tries to match it to predefined values, and if it doesn't find one, it parses the arbitrary value inside brackets and applies it as custom CSS.

Render Steps - 3 Steps

Code Added:class="bg-[#ff6347]"

Before

[___________]
|           |
|           |
|           |
|___________|

→

After

[###########]
|           |
|           |
|           |
|___________|

The background color changes to a bright tomato red using the arbitrary hex color value.

🔧 Browser Action:Parses arbitrary color value and applies background-color style.

Code Sample

A div with a custom tomato background color, padding of 2.5rem, and text size of 1.25rem using arbitrary values.

Tailwind

<div class="bg-[#ff6347] p-[2.5rem] text-[1.25rem]">Hello!</div>

Render Quiz - 3 Questions

After applying step 1, what visual change do you see?

A Padding increases inside the box

B Text size becomes larger

C Background color changes to a custom tomato red

D No visible change

Common Confusions - 2 Topics

Why can't I just use normal Tailwind classes for all sizes and colors?

Tailwind has a fixed set of predefined sizes and colors for consistency and performance. Arbitrary values let you use any value when the predefined ones don't fit your design.

💡 Use arbitrary values inside brackets [ ] when you need a custom size or color not in Tailwind's scale.

Why do I need to put the value inside square brackets?

Square brackets tell Tailwind to treat the value as a custom CSS value instead of a predefined keyword. This helps Tailwind parse and apply it correctly.

💡 Always wrap custom values in [ ] to activate arbitrary value parsing.

Property Reference

Property	Example Arbitrary Value	Visual Effect	Common Use
background-color	[#ff6347]	Changes background to custom color	Custom brand or accent colors
padding	[2.5rem]	Adds custom spacing inside element	Precise spacing beyond default scale
font-size	[1.25rem]	Sets text size to exact value	Fine-tuning typography

Concept Snapshot

Tailwind uses predefined scales for colors, sizes, and spacing. Arbitrary values let you use any CSS value by wrapping it in [ ]. This allows precise control beyond the default scale. Use square brackets to signal custom values. Common properties: background-color, padding, font-size. Arbitrary values keep design flexible and consistent.