Custom themes/variants based on prefix (similar to "dark")

[marknuyens]

Perhaps this is an idea so simple that it has already been considered inside and out, but perhaps it's so simple it hasn't. ;-)

Anyway, I was thinking on ways to create a few themes and couldn't quite figure out how to do so. I did find ways like adjusting some config rules, setting CSS variables, etc.

My idea would suggest using the same method as dark, implying this is essentially a theme. Similar to how we handle dark styling, we could style an element using a custom keyword, e.g. "onyx" in case we're designing a theme called "Onyx".

Styling would then look like this:

<section class="bg-white text-black p-8 font-sans onyx:font-serif onyx:bg-stone-800 onyx:text-gray-200">
...
</section>

In conclusion, this idea would allow users to create their own custom theme keyword, of which dark is a default example, and would match any other elements using that same theme name (in our case onyx).

Let me know what you all think! ;-) Including @adamwathan, of course.

[dario-baumberger]

This config should work for you:

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin");

module.exports = {
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant("onyx", ".onyx &");
    })
  ]
};

With addVariant("onyx", ".onyx &"); the result is roughly the same as if darkMode: 'class' is set, simply without is() in the generated css.

.onyx .onyx\:border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity)); }

The difference between with is and without is, is the specificity of the selector.

If you want to have it with is, you can try this. I haven't tried it myself, but it should work:

addVariant("onyx", `:is(.onyx &)`)

Result:

:is(.onyx .onyx\:border-green-500) {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

[dario-baumberger]

I tried it, it works, see example, generates the same result as dark:

https://stackblitz.com/edit/stackblitz-starters-7xcx2v

Config:

/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin');

module.exports = {
  darkMode: 'class',
  content: ['./**/*.{html,js}'],
  plugins: [
    plugin(function ({ addVariant, e }) {
      addVariant('custom', ':is(:where(.custom) &)');
    }),
  ],
};

[marknuyens]

That looks awesome! 🎊 I will definitely try this out on my projects.

Ideally though, Tailwind would provide this out of the box, allowing anyone to just start describing their theme in their HTML, without any declarations of definitions. Tailwind would then detect the use of this "variant" syntax (i.e. by cross referencing it with pre-existing variants) and then allow this custom variant (or "theme") to be used throughout the rest of the code.

Again, this is just me trying to imagine a perfect world. 🌈 I realize there might be constraints, but it would make things feel way more natural. Another way could be to define these variants in the Tailwind config through one variants property (of which 'dark' is just one native example of - as opposed to a darkMode property).

What do you think? Am I hallucinating or being spoiled, or both? ;-) I would very much appreciate @adamwathan's opinion on this.

[danfleser]

This is exactly what I needed. Thank guys

[GodoyMS]

Thank you, you really saved my day

[thereis]

This should be on the docs, crazy stuff, thank you!

[xTunqki]

how to do it on tailwindcss4?

[FabianoLothor]

@custom-variant light (&:where(.light, .light *));
@custom-variant dark (&:where(.dark, .dark *));

@custom-variant air (&:where(.air, .air *));
@custom-variant fire (&:where(.fire, .fire *));
@custom-variant earth (&:where(.earth, .earth *));
@custom-variant water (&:where(.water, .water *));