Default color palette and shades in Tailwind - Browser Rendering Trace

Render Flow - Default color palette and shades

[Read tailwind.config.js] -> [Load default colors] -> [Generate CSS variables] -> [Apply color classes] -> [Render elements with colors]

Tailwind reads its default color palette from configuration, generates CSS classes for each color shade, and applies these styles to elements in the browser.

Render Steps - 6 Steps

Code Added:bg-blue-500

Before

[__________]
[          ]
[          ]
[__________]

→

After

[##########]
[##########]
[##########]
[##########]

The background color changes to a medium blue shade (blue-500), filling the box with blue.

🔧 Browser Action:Applies background-color style, triggers repaint.

Code Sample

Three boxes with different background colors from Tailwind's default palette and contrasting text colors.

Tailwind

<div class="bg-blue-500 text-white p-4">Blue 500 background</div>
<div class="bg-red-300 text-black p-4">Red 300 background</div>
<div class="bg-green-700 text-white p-4">Green 700 background</div>

Render Quiz - 3 Questions

After applying bg-red-300 and text-black (render_steps 3 and 4), what do you see?

A A light red background with black text

B A dark red background with white text

C A blue background with white text

D A green background with black text

Common Confusions - 2 Topics

Why does bg-blue-500 look different from bg-blue-700?

The number after the color name shows the shade. Lower numbers like 300 are lighter, higher numbers like 700 are darker. So blue-500 is medium blue, blue-700 is darker blue.

💡 Remember: smaller shade number = lighter color; bigger number = darker color.

Why should I use text-white on dark backgrounds and text-black on light backgrounds?

Text color must contrast with background for readability. White text stands out on dark backgrounds, black text stands out on light backgrounds.

💡 Always pick text color opposite in brightness to background color.

Property Reference

Property	Value Example	Shade Number	Visual Effect	Common Use
bg-color	bg-blue-500	500	Medium saturation and brightness background color	Primary buttons, highlights
bg-color	bg-red-300	300	Light, pastel background color	Warnings, soft alerts
bg-color	bg-green-700	700	Dark, rich background color	Success messages, strong emphasis
text-color	text-white	N/A	White text for contrast on dark backgrounds	Readable text on dark backgrounds
text-color	text-black	N/A	Black text for contrast on light backgrounds	Readable text on light backgrounds

Concept Snapshot

Tailwind colors use names plus shade numbers (100-900). Lower numbers are lighter shades, higher are darker. Use bg-color classes for backgrounds, text-color classes for text. Choose text color for good contrast (white on dark, black on light). Common shades: 300 (light), 500 (medium), 700 (dark). This palette helps keep consistent, accessible colors.