正确的方法是基于观点的，你可以在html或者body或者任何“全局”选择器上使用类，使用定制的data-attributes（比如data-theme）等等
在example中，我使用:has CSS选择器基于.theme元素切换主题
它将not be available under some browsers，因为并非所有主题都支持:has CSS选择器
为了使用自定义变量编写简单的插件

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 &')
    })
  ],
}

使用Javascript在.theme元素上切换theme--red或theme--green类

<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>

最简单、最干净的解决方案是使用tw-colors
在tailwind.config.js中定义主题

const { createThemes } = require('tw-colors');

   module.exports = {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [
         createThemes({
            light: { 
               'primary': 'steelblue',
               'secondary': 'darkblue',
               'base-100': '#F3F3F3',
            },
            dark: { 
               'primary': 'turquoise',
               'secondary': 'tomato',
               'base-100': '#4A4A4A',
            }
         })
      ],
   };

然后在主题之间随意切换

<div class={someCondition ? 'theme-dark' : 'theme-light'}>
  ...
  <button class='bg-primary'>Click me</button>
  ...
</div>