Tailwind CSS v4: Multi-Theme Strategy

Published on

Saturday, March 9, 2024

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 🤙