Tailwind CSS Color Configuration with PaletteRx

Tailwind CSS uses a configuration object to define your color palette. PaletteRx exports a ready-to-paste colors object that integrates directly into your tailwind.config.js.

The Export Format

Select Tailwind in PaletteRx Step 5 to get a configuration object like:

colors: {
  'primary': '#4f46e5',
  'primary-2': '#7c3aed',
  'supporting': '#f97316',
  'light-base': '#f8f9fb',
  'dark-base': '#1a1a2e',
}

Each color is named by its role and priority order, giving you semantic utility classes like bg-primary, text-dark-base, and border-supporting.

Integration

Paste the exported object into the theme.extend.colors section of your Tailwind config. This adds your palette colors alongside Tailwind's defaults. If you want your colors to replace the defaults, put them directly in theme.colors instead.

Why Role-Based Names Matter

Using semantic names like primary and supporting instead of color-specific names like blue and orange means you can change your brand colors without updating every template. Replace the hex value in one place, and every bg-primary across your site updates automatically.