How to create multi theme using tailwind v4

[azharuddin-mulla-amla]

let suppose I have three different theme like light, neon, minimalist. each theme has different design system and also override default theme too. and It should be switch base on theme <div data-theme="minimalist"> <h1 className="bg-test">Hello world!</h1> <h1 className="text-test">Hello world!</h1> </div>.

[wongjn]

You can have the values reference CSS variables and then switch out those variables per theme: https://play.tailwindcss.com/806fAQKJoN

[azharuddin-mulla-amla]

yes by this way is possible, I tried. but I have two different tailwind config like: minimalist.tailwind.config.js and neon.tailwind.config.js and i need to add both in core tailwind.config.js file.

[jlahijani]

@wongjn Thanks for that tip. I had previously used Simon Swiss's approach in an alpha version of Tailwind v4 but that no longer works in the final version of Tailwind v4. Your approach did.

[SutharShantanu]

@jlahijani do you any idea how can we use multiple themes along with there dark and light mode. I'm tring to implement that using Tailwind CSS v4. but the documentation isn't much clear. can you help me here ?

@import "tailwindcss";
@import "tailwindcss/utilities";
@plugin 'tailwindcss-animate';

/* Light & Dark Mode Setup */
:root {
  --background: #ffffff;
  --foreground: #171717;

    /* Typography */
  --font-sans: var(--font-geist-sans, Arial, Helvetica, sans-serif);
  --font-mono: var(--font-geist-mono, 'Courier New', monospace);

  /* Text Sizes */
  --text-title: 2.25rem;
  --text-title--line-height: 2.75rem;
  --text-title--font-weight: 700;
  --text-heading: 1.875rem;
  --text-heading--line-height: 2.25rem;
  --text-heading--font-weight: 700;
  --text-subheading: 1.5rem;
  --text-subheading--line-height: 2rem;
  --text-subheading--font-weight: 600;
  --text-description: 1rem;
  --text-description--line-height: 1.5rem;
  --text-description--font-weight: 400;
  --text-small: 0.875rem;
  --text-small--line-height: 1.25rem;
  --text-small--font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #29292B;
    --foreground: #C9C7BA;
  }
}

/* Tailwind Theme Variables */
@theme jetBlack {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}
@theme aquaPeach {
  --color-deep-aqua: #278783;
  --color-peach-cream: #FFEBD0;
}
@theme peachRed {
  --color-peach-puff: #FEF1E1;
  --color-fiery-red: #FC350B;
}
@theme mintBlue {
  --color-soft-mint: #D1E0D7;
  --color-steel-blue: #607EBC;
}
@theme ivoryCocoa {
  --color-soft-ivory: #ECE5D8;
  --color-dark-cocoa: #321B1F;
}
@theme redCream {
  --color-bright-orange-red: #F66435;
  --color-light-cream: #F4EFCA;
}

/* Base Styles */
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
}

/* Selection */
@layer base {
  ::selection {
    background-color: var(--color-fiery-red);
    color: var(--color-soft-ivory);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }

  .dark ::selection {
    background-color: var(--color-soft-ivory);
    color: var(--color-dark-cocoa);
    transition: background-color 0.3s ease, color 0.3s ease-in-out;
  }
}

/* Number Input Arrows */
* {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
}

[wongjn]

You don't want to duplicate imports:

 @import "tailwindcss";
-@import "tailwindcss/utilities";

It seems you'd want your :root rule to be actually @theme to register the values into Tailwind:

-:root {
+@theme {
   --background: #ffffff;
   --foreground: #171717;

Consider renaming --background and --foreground to --color-background and --color-foreground so they are available values for Tailwind color utilities.

 @theme {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-background: #ffffff;
+  --color-foreground: #171717;

Change the @media (prefers-color-scheme: dark) { rule to match:

 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #29292B;
-    --foreground: #C9C7BA;
+    --color-background: #29292B;
+    --color-foreground: #C9C7BA;
   }
 }

Be sure to put the aforementioned rule in @layer theme too (for cascade speicificity reasons):

+@layer theme {
   @media (prefers-color-scheme: dark) {
     :root {
       --color-background: #29292B;
       --color-foreground: #C9C7BA;
     }
   }
+}

The other colors can go in your @theme too:

 @theme {
   …
+  --color-deep-aqua: #278783;
+  --color-peach-cream: #FFEBD0;
+  --color-peach-puff: #FEF1E1;
+  --color-fiery-red: #FC350B;
+  --color-soft-mint: #D1E0D7;
+  --color-steel-blue: #607EBC;
+  --color-soft-ivory: #ECE5D8;
+  --color-dark-cocoa: #321B1F;
+  --color-bright-orange-red: #F66435;
+  --color-light-cream: #F4EFCA;
 }

If you switch themes depending on the data-theme attribute on <html>, you could override --color-background and --color-foreground. This is regular CSS at this point and not special Tailwind syntax:

@layer theme {
  [data-theme="jetBlack"] {
    --color-background: …;
    --color-foreground: …;
  }

  [data-theme="aquaPeach"] {
    --color-background: …;
    --color-foreground: …;
  }

  …
}