Ultimate Guide: Building A Theme System With Next.js 15 And Tailwind Css V4...

When I started building DevType, a typing practice app for programmers, I wanted users to choose from multiple editor themes - not just light and dark, but themes like Dracula, VS Code Dark, GitHub, Monokai, and Nord.

The typical dark: prefix approach in Tailwind doesn't work well here. You'd end up with something like:

The key insight is that CSS variables can be updated at runtime, and Tailwind CSS v4 makes it trivial to use them as color values.

First, define what colors each theme needs. I split this into two categories:

This gives you type safety when defining themes. No more typos in color values.

I ended up with 8 themes: Dracula, VS Code Dark, GitHub Dark, GitHub Light, One Light, Monokai, Nord, and Solarized Dark.

This is where the magic happens. When a user selects a theme, update the CSS variables on :root:

That's it. One function call and all colors update instantly.

In Tailwind CSS v4, you use @theme to define custom properties. Here's my globals.css:

Now you can use bg-background, text-foreground, border-border etc. in your components. These colors automatically update when the theme changes.

Source: Dev.to