Tailwind CSS Colors: Best Practices for scalable UI

Why You Should Stop Using Hex Codes

Hardcoding #3B82F6 into your React components is a technical debt trap. What happens when your brand rebrands? What happens when you need dark mode?

Semantic Naming vs. Color Naming

Tailwind provides color names like blue-500. This is great for prototyping, but for production apps, you should map these to semantic names.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)', // Maps to blue-600
        surface: 'var(--bg-surface)',    // Maps to slate-50
        danger: 'var(--color-red-500)',
      }
    }
  }
}

The Benefits of CSS Variables

By using CSS variables (like we do in UI Colors Lab exports), you can change your entire theme at runtime without a rebuild. This is how modern "Dark Mode" toggles work instantly.

Summary

1. Define your primitive palette (slate, blue, red).
2. Alias them to semantic names (surface, primary, danger).
3. Use semantic names in your markup.

Need a head start? All palettes on UI Colors Lab come with a ready-to-copy Tailwind config.