Arbitrary color values in Tailwind - Browser Rendering Trace

Render Flow - Arbitrary color values

[Read HTML element] -> [Parse Tailwind class] -> [Detect arbitrary color syntax] -> [Validate color value] -> [Generate CSS rule] -> [Apply CSS to element] -> [Render color visually]

The browser reads the HTML and Tailwind classes, detects the arbitrary color syntax like bg-[#123abc], generates the matching CSS rule with that exact color, applies it to the element, and then paints the element with that color.

Render Steps - 3 Steps

Code Added:<div class="w-40 h-20">

Before

[ ]

→

After

[__________]
[          ]
[          ]
[__________]

Adding a div with fixed width and height creates a rectangular box placeholder.

🔧 Browser Action:Creates DOM node and applies width and height styles, triggers layout.

Code Sample

A green rectangular box with white centered text, using an arbitrary hex color value for background.

Tailwind

<div class="w-40 h-20 bg-[#4caf50] text-white flex items-center justify-center">
  Custom Green Box
</div>

Render Quiz - 3 Questions

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

A The box disappears from the page.

B The box background changes to a green color (#4caf50).

C The text inside the box becomes white.

D The box border becomes thicker.

Common Confusions - 2 Topics

Why doesn't my arbitrary color class work when I write bg-#4caf50 instead of bg-[#4caf50]?

Tailwind requires arbitrary values to be inside square brackets. Without brackets, it treats it as a normal class and ignores it.

💡 Always wrap arbitrary values in square brackets like bg-[#4caf50].

Why is my text not visible even though I set text-[#ffffff] on a light background?

White text on a light background has low contrast and is hard to see. The color is applied correctly but visually blends in.

💡 Check color contrast to ensure text is readable.

Property Reference

Property	Value Applied	Visual Effect	Common Use
bg-[#hexcode]	bg-[#4caf50]	Sets background color to exact hex value	Custom brand or theme colors
text-[#hexcode]	text-[#ff6347]	Sets text color to exact hex value	Custom text colors
border-[#hexcode]	border-[#000000]	Sets border color to exact hex value	Custom border styling

Concept Snapshot

Arbitrary color values in Tailwind use square brackets, e.g., bg-[#4caf50]. They let you apply exact colors not in the default palette. Use bg-[#hex], text-[#hex], border-[#hex] for backgrounds, text, and borders. Remember to wrap colors in brackets to work. Visual effect: elements show the exact custom color you specify.