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.

Practice

1. Which Tailwind class applies a medium shade of blue background color?

easy

A. bg-blue-50

B. bg-blue-900

C. bg-blue-500

D. bg-blue-1000

Solution

1. Step 1: Understand Tailwind color shade scale

   Tailwind colors range from 50 (lightest) to 900 (darkest). 500 is the medium shade.

2. Step 2: Identify the correct class for medium blue

   The class bg-blue-500 applies the medium blue background color.

3. Final Answer:

   bg-blue-500 -> Option C

4. Quick Check:

   Medium shade blue = bg-blue-500 [OK]

Hint: Remember 500 is medium shade in Tailwind colors [OK]

Common Mistakes:

• Choosing 50 or 900 thinking they are medium
• Using non-existent shade like 1000
• Confusing text color with background color classes

2. Which of the following is the correct Tailwind class to set text color to a dark red shade?

easy

A. text-red-300

B. text-red-700

C. text-red-50

D. text-red-1000

Solution

1. Step 1: Identify dark shade range in Tailwind

   Dark shades are closer to 700 or 900. Light shades are 50 or 100.

2. Step 2: Pick the class for dark red text

   text-red-700 is a dark red shade suitable for text color.

3. Final Answer:

   text-red-700 -> Option B

4. Quick Check:

   Dark red text = text-red-700 [OK]

Hint: Dark shades are 700 or above in Tailwind [OK]

Common Mistakes:

• Using 300 which is lighter shade
• Using 50 which is very light
• Using invalid shade 1000

3. What background color will the class bg-green-200 apply in Tailwind CSS?

medium

A. An invalid green shade

B. A medium green shade

C. A very dark green shade

D. A light green shade

Solution

1. Step 1: Understand Tailwind green shade numbering

   Lower numbers like 50, 100, 200 are light shades; higher numbers like 700, 900 are dark.

2. Step 2: Interpret bg-green-200

   The class bg-green-200 applies a light green background color.

3. Final Answer:

   A light green shade -> Option D

4. Quick Check:

   Green 200 = light green shade [OK]

Hint: Lower shade numbers mean lighter colors [OK]

Common Mistakes:

• Thinking 200 is medium or dark shade
• Confusing background and text color classes
• Assuming 200 is invalid shade

4. You want to apply a yellow background with a medium shade but wrote bg-yellow-600. The color looks too dark. What is the best fix?

medium

A. Change class to bg-yellow-400

B. Change class to bg-yellow-900

C. Change class to bg-yellow-50

D. Keep bg-yellow-600 and add opacity

Solution

1. Step 1: Understand shade brightness in Tailwind

   600 is a dark shade; 400 is medium; 50 is very light.

2. Step 2: Choose a medium shade for yellow background

   Changing to bg-yellow-400 will give a medium yellow shade, lighter than 600.

3. Final Answer:

   Change class to bg-yellow-400 -> Option A

4. Quick Check:

   Medium yellow = bg-yellow-400 [OK]

Hint: Use 400 for medium shade if 600 is too dark [OK]

Common Mistakes:

• Choosing 900 which is even darker
• Choosing 50 which is too light
• Adding opacity instead of adjusting shade

5. You want to create a button with a blue background that changes from light blue on hover to dark blue when active. Which combination of Tailwind classes is correct?

hard

A. bg-blue-300 hover:bg-blue-500 active:bg-blue-700

B. bg-blue-700 hover:bg-blue-300 active:bg-blue-500

C. bg-blue-500 hover:bg-blue-700 active:bg-blue-300

D. bg-blue-900 hover:bg-blue-500 active:bg-blue-300

Solution

1. Step 1: Understand shade order for blue in Tailwind

   Lower numbers (300) are lighter, higher numbers (700) are darker.

2. Step 2: Match states with correct shades

   Base: light blue (300), hover: medium blue (500), active: dark blue (700).

3. Step 3: Verify class order

   bg-blue-300 hover:bg-blue-500 active:bg-blue-700 matches the requirement.

4. Final Answer:

   bg-blue-300 hover:bg-blue-500 active:bg-blue-700 -> Option A

5. Quick Check:

   Light to dark on hover and active = bg-blue-300 hover:bg-blue-500 active:bg-blue-700 [OK]

Hint: Lower shade number = lighter color; increase on hover/active [OK]

Common Mistakes:

• Reversing light and dark shades in states
• Using darker base color than hover
• Mixing up hover and active shades