# Tailwind CSS v4: Multi-Theme Strategy

Tailwind CSS v4 makes setting up a multi-theme strategy much simpler. No more RGB conversion, <alpha-value> 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](https://www.protailwind.com/workshops/multi-theme-strategy), 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](https://www.protailwind.com/workshops/multi-theme-strategy)! It was recorded for Tailwind v3, but is still very much relevant with Tailwind CSS v4 🤙

* * *

I've teamed up with [Kent C. Dodds](https://twitter.com/kentcdodds) to teach Tailwind CSS (and more) as a partner instructor on the [Epic Web](https://www.epicweb.dev/workshops/pixel-perfect-figma-to-tailwind) platform!

[Pro Tailwind](https://protailwind.com/) is an advanced-level course on Tailwind CSS, like multi-theme and multi-style component strategies.