Extending Tailwind "modes" alongside dark mode

Question

What is the best approach for adding your own themes for Tailwind in the same manner as dark mode?

The dark class is included within the HTML tag to signify that the page is now in dark mode, and we use the dark: selector when defining classes to style in that mode.

My question - how do we go about adding additional classes to the HTML tag and using additional custom selectors within styles to style in that particular variant?

I've read some plugin and variant documentation on the official Tailwind site, but it is not too clear what the right approach is here.

Answer 1

The right approach is opinion based. You may use classes on html or body or any "global" selector, use custom data-attributes (like data-theme) etc

Here is example where I am using :has CSS selector to switch theme based on .theme element

It will not be available under some browsers as not all of theme has support for :has CSS selector

In order to use custom variant write simple plugin for it

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    plugin(function({addVariant}) {
      // here is your CSS selector - could be anything
      // in this case it is `.theme` element
      // with `.theme--red` class (both present)
      addVariant('theme-red', '.theme.theme--red &')

      // and so on
      addVariant('theme-green', '.theme.theme--green &')
    })
  ],
}

Using Javascript toggle theme--red or theme--green classes on .theme element

<div class="theme">
  <div class="theme-red:bg-red-200 theme-green:bg-green-200 theme-red:text-red-700 theme-green:text-green-700">
    <h2 class="">Heading</h2>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nam blanditiis vitae. Accusantium nostrum tenetur assumenda dolorum placeat, aliquam reprehenderit porro illum nam illo quis eum mollitia nulla atque delectus?</p>
  </div>
</div>