Implementing Brand Colors in Tailwind CSS Projects

Starting with Brand Colors

Most brands have 1-3 primary colors. The challenge is creating a complete shade palette and integrating it with Tailwind's system.

Step 1: Define Your Base Colors

// Identify your brand's core colors
const brandColors = {
  primary: '#2563eb',     // Your main brand color
  secondary: '#7c3aed',   // Secondary/accent color
  accent: '#f59e0b',      // Call-to-action/highlight
};

Step 2: Generate Shade Palettes

Use our Shade Generator tool to create a complete 50-950 palette from each base color. This ensures consistency with Tailwind's built-in colors.

Step 3: Add to Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#2563eb', // Your base color
          600: '#1d4ed8',
          700: '#1e40af',
          800: '#1e3a8a',
          900: '#1e3a8a',
          950: '#172554',
        },
        // Add secondary and accent similarly
      }
    }
  }
}

Step 4: Create Semantic Aliases

// For easier usage
colors: {
  brand: { /* full palette */ },
  primary: '#2563eb', // Quick access
  'primary-hover': '#1d4ed8',
  'primary-light': '#eff6ff',
}