Tailwind CSS v4 Color Updates: What Changed for Palette Integration

PaletteRx">Tailwind CSS v4 introduced a fundamental shift in how custom colors are configured. Instead of defining colors in a tailwind.config.js file, v4 uses a CSS-first approach where custom values are defined using @theme directives directly in your CSS.

The Old Way (v3)

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4f46e5',
        supporting: '#0d9488',
      }
    }
  }
}

The New Way (v4)

/* main.css */
@import "tailwindcss";

@theme {
  --color-primary: #4f46e5;
  --color-supporting: #0d9488;
  --color-light-base: #f8f9fb;
  --color-dark-base: #1a1a2e;
}

Colors defined in @theme automatically generate utility classes: bg-primary, text-supporting, border-light-base, etc. The CSS-first approach means your PaletteRx CSS Variables export is almost directly usable. Just wrap your variables in @theme instead of :root.

The PaletteRx Connection

PaletteRx's CSS Variables export produces :root declarations by default. For Tailwind v4, copy the variable declarations and paste them inside an @theme block. The variable names (--color-primary, etc.) become your utility class names automatically.

Shade Generation

Tailwind v3 required you to define shade scales (50 through 950) explicitly. Tailwind v4 can generate shades automatically from a single base color using the --color-primary-* pattern with OKLCH interpolation. Your PaletteRx base colors become the anchors for automatic shade generation.