Square bracket notation for custom values in Tailwind - Browser Rendering Trace

Render Flow - Square bracket notation for custom values

[Read Tailwind class] -> [Detect square bracket notation] -> [Parse custom value inside brackets] -> [Generate CSS rule with custom value] -> [Apply CSS to element] -> [Render updated style]

The browser reads the Tailwind class with square brackets, extracts the custom value inside, creates a CSS rule using that value, and applies it to the element for rendering.

Render Steps - 3 Steps

Code Added:class="bg-[#3490dc]"

Before

[__________]
|          |
|          |
|          |
|__________|

→

After

[##########]
|          |
|          |
|          |
|__________|

The background color changes to a custom blue (#3490dc) using square bracket notation.

🔧 Browser Action:Parses custom background color and applies CSS background-color property.

Code Sample

A box with a custom blue background color, padding of 2 rem, and text size of 1.5 rem using Tailwind's square bracket notation.

Tailwind

<div class="bg-[#3490dc] p-[2rem] text-[1.5rem]">
  Custom styled box
</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 blue

D No visible change

Common Confusions - 2 Topics

Why doesn't my custom value work without square brackets?

Tailwind only recognizes custom values inside square brackets. Without brackets, it looks for predefined classes and ignores unknown values.

💡 Always wrap custom values in square brackets to apply them.

Can I use any CSS value inside the brackets?

You can use most valid CSS values, but some complex values might need escaping or won't work as expected.

💡 Use simple, valid CSS values inside brackets for best results.

Property Reference

Property	Square Bracket Syntax	Value Type	Visual Effect	Common Use
Background Color	bg-[#hexcode]	Color code	Changes background color	Custom brand colors
Padding	p-[value]	Length (rem, px, etc.)	Adds space inside element edges	Custom spacing
Text Size	text-[value]	Length (rem, px)	Changes font size	Custom typography sizes

Concept Snapshot

Tailwind's square bracket notation lets you use custom CSS values. Syntax: property-[value], e.g., bg-[#3490dc], p-[2rem], text-[1.5rem]. It generates CSS with your exact value. Always wrap custom values in brackets. Great for colors, spacing, font sizes beyond defaults.