Several themes in one project

[kvainiute]

We're moving to tailwind v4 in our project and so far so good, except for one part - in our website we have one base theme (defined with @theme) and additional different themes based on year (colors, fonts, etc.). In v3, we used tailwindcss-themer to make it work, setting the theme class for each year at the top of all the routes for a specific year, making it possible to use different shades of the same color (i.e. green-400) in different paths.

With v4, this specific package fails to be loaded and I was wondering if there are nice ways to make this work with just tailwind v4 and @theme directive. Simplified example of previous implementation with tailwindcss-themer:

// tailwind.config.js

import sharedConfig from "base-config/tailwind.config.js";
import themer from "tailwindcss-themer";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [sharedConfig],
  plugins: [
    themer({
      themes: [
        {
          name: "v2024",
          extend: {
            colors: {
              green: {
                400: "#5AC389",
              }
            },
          },
        },
        {
          name: "v2025",
          extend: {
            colors: {
              green: {
                400: "#00DB9B",
              }
            }
          },
        },
      ],
    }),
  ],
};

// App.tsx

function App() {
  return (
    <div>
      <div className="v2024">
        <h1 className="text-green-400">2024</h4> // this text is in color #5AC389
      </div>
      <div className="v2025">
        <h1 className="text-green-400">2024</h4> // this text is in color #00DB9B
      </div>
    </div>
  )
}

Any help would be appreciated!

[wongjn]

@layer theme {
  .v2024 {
    --color-green-400: #5AC389;
  }
  .v2025 {
    --color-green-400: #00DB9B;
  }
}

https://play.tailwindcss.com/QvYdw3Npej?file=css

[kvainiute]

thanks! I'm almost there, yet there is still one issue with this approach, if, let's say, I have a setup like this:

// tailwind.css

@import "tailwindcss";

@theme {
  --color-*: initial;
  --color-i-green-400: orange; // pre-fixing base colors with -i- since we still want them to be available alongside the yearly colors
}

@layer theme {
  .v2024 {
    --color-green-400: red;
  }

  .v2025 {
    --color-green-400: blue;
  }
}

// index.html

<div>
  <h1 class="text-i-green-400">Default</h4> // text is orange
  <div class="v2024">
    <h1 class="text-green-400">2024</h4> // text is black (default)
  </div>
  <div class="v2025">
    <h1 class="text-green-400">2025</h4> // text is black (default)
  </div>
</div>

yet if we define the colors with variables directly, it works:

// index.html

<div>
  <h1 class="text-i-green-400">Default</h4> // text is orange
  <div class="v2024">
    <h1 class="text-(--color-green-400)">2024</h4> // text is red (correct)
  </div>
  <div class="v2025">
    <h1 class="text-(--color-green-400)">2025</h4> // text is blue (correct)
  </div>
</div>

Example:
https://play.tailwindcss.com/dTl1LB2ZdL

is there a workaround?

[wongjn]

You'd want --color-green-400 to exist, otherwise text-green-400 won't exist: https://play.tailwindcss.com/6u6LNP3XsL?file=css