Tailwind CSS Custom Color Theme Guide

Code Snippet Example

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0284c7',
          900: '#0c4a6e',
        },
      },
    },
  },
};

Engineering Best Practices

• Extend colors instead of overriding defaults
• Use 50-900 shade scales for design consistency
• Combine Tailwind dark mode class with CSS variables