用和黑暗模式一樣的方式為順風添加你自己的主題的最好方法是什么？

HTML標記中包含了dark類，表示頁面現在處于黑暗模式，并且我們在定義類時使用dark: selector來設計黑暗模式。

我的問題是——我們如何向HTML標簽添加額外的類，并在樣式中使用額外的自定義選擇器來設計特定變體的樣式？

我在官方的Tailwind網站上看過一些插件和變體文檔，但是不太清楚這里的正確方法是什么。

正確的方法是基于觀點的。你可以在html或者body或者任何& quot全球& quot選擇器，使用自定義數據屬性(如數據主題)等

這里是我使用的例子:有CSS選擇器切換主題的基礎。主題元素

它在一些瀏覽器下不可用，因為不是所有的主題都支持:有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打開主題-紅色或主題-綠色類。主題元素

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

最簡單的& amp最干凈的解決方案是使用雙色

在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': '#F3F3F3',
            },
            dark: { 
               'primary': 'turquoise',
               'secondary': 'tomato',
               'base': '#4A4A4A',
            }
         })
      ],
   };

然后隨意切換主題

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