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.