Default color palette and shades in Tailwind - Performance & Optimization

Performance: Default color palette and shades

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling CSS size and paint complexity.

Applying colors consistently across a website

Tailwind

class="bg-gray-900 text-gray-50" /* Tailwind default palette classes */

Reuses predefined CSS classes, reducing CSS size and improving caching.

📈 Performance Gainsaves 10-20kb CSS, reduces paint complexity

Applying colors consistently across a website

Tailwind

button { background-color: #1a202c; color: #f7fafc; } /* custom hex colors everywhere */

Using many custom hex colors increases CSS size and prevents reuse of cached styles.

📉 Performance Costadds 10-20kb to CSS bundle, increases paint complexity

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Custom hex colors everywhere	Low	0	High due to many unique colors	[X] Bad
Tailwind default color classes	Low	0	Low due to reused styles	[OK] Good

Rendering Pipeline

The browser uses CSS classes from Tailwind's default palette to calculate styles efficiently, minimizing layout recalculations and paint operations.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckPaint stage due to complex color blending if many unique colors are used

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling CSS size and paint complexity.

Optimization Tips

1Use Tailwind's default color palette classes to minimize CSS size.

2Avoid many unique custom hex colors to reduce paint complexity.

3Reuse color classes to improve browser caching and rendering speed.

Performance Quiz - 3 Questions

Why is using Tailwind's default color palette better for performance than custom hex colors?

A It reduces CSS bundle size and improves caching

B It adds more colors for better visuals

C It forces more reflows to update colors

D It disables browser paint optimizations

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the paint and style recalculation times.

What to look for: Look for reduced paint times and fewer style recalculations when using Tailwind default 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