Tailwind CSS v4: Multi-Theme Strategy

Tailwind CSS v4 makes setting up a multi-theme strategy much simpler. No more RGB conversion, management and all those extra steps!

Theme configuration in CSS

One of the key new features in v4 is the ability to customize the theme directly in a CSS file instead of the Tailwind config.

Theme values (like colors, font sizes, spacing) can be defined with CSS variables like so:

/* app/styles.css */
@import 'tailwindcss';

@theme {
  --color-primary: #aab9ff;
}

This is the equivalent of doing the following in Tailwind CSS v3:

// tailwind.config.ts
export default {
  theme: {
    colors: {
      primary: '#aab9ff',
    },
  },
}

In v4, the CSS variables are also exposed in your CSS output, which means you can “consume” those variables anywhere you need it:

<div class="bg-(--color-primary)"></div>

Multi-Theme Strategy in Tailwind

If you’ve taken my Multi-Theme Strategy workshop, you know that the procedure to define themable CSS variables was somewhat convoluted:

1. Define CSS variables holding R``G``B channels

:root {
  --primary: 170 185 255;
}

2. Compose that CSS variable with an rgb() function + <alpha-value> to add a color in the tailwind.config.ts file

theme: {
  extend: {
    colors: {
      primary: rbg(var(--primary) / <alpha-value>)
    }
  }
}

Honestly, this is quite painful. And forces you to define your colors in a weird, custom format (space-separated R``G and B channels).

It’s way easier in Tailwind v4

Tailwind CSS v4 drastically simplifies the process of defining themable CSS variables:

1. Define a CSS variable with any color format, in CSS

@theme {
  --color-primary: #aab9ff;
}

2. That’s it! there is no step 2.

You can redefine this variable value at different theme scopes like so:

@theme {
  --color-primary: #aab9ff;
}

@layer base {
  [data-theme='ocean'] {
    --color-primary: #aab9ff;
  }

[data-theme='rainforest'] {
    --color-primary: #56d0a0;
  }

[data-theme='candy'] {
    --color-primary: #f9a8d4;
  }
}

And that’s all you need!

Pretty neat, huh?

Multi-Theme Strategy Pro Workshop

If you want to dive deeper into Tailwind CSS multi-theme strategies, check out my Pro Tailwind theming workshop! It was recorded for Tailwind v3, but is still very much relevant with Tailwind CSS v4 🤙

I've teamed up with Kent C. Dodds to teach Tailwind CSS (and more) as a partner instructor on the Epic Web platform!

Pro Tailwind is an advanced-level course on Tailwind CSS, like multi-theme and multi-style component strategies.