Semantic Color Tokens with Tailwind CSS

Semantic Color Tokens

Instead of using generic color names like green-500 or red-600 throughout your codebase, semantic tokens give colors meaning based on their purpose rather than their visual appearance.

Why Semantic Tokens Matter

Consider this comparison:

Generic	Semantic
bg-green-500	bg-success
text-red-600	text-danger
border-yellow-400	border-warning
bg-blue-100	bg-info

With semantic tokens, changing your success color from green to teal requires updating a single config value instead of finding and replacing every instance across your project.

Implementation

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        success: "#22c55e",
        warning: "#eab308",
        danger:  "#ef4444",
        info:    "#3b82f6",
        surface: "#f8fafc",
        "on-surface": "#1e293b",
      },
    },
  },
};

Advanced: Multi-shade Semantic Tokens

For richer feedback UIs, provide shades:

colors: {
  success: {
    light:   "#dcfce7",
    DEFAULT: "#22c55e",
    dark:    "#15803d",
  },
}

The DEFAULT key lets you use bg-success without a suffix, while bg-success-light and bg-success-dark are also available.