与黑暗模式一起扩展 Tailwind“模式”

Question

以与黑暗模式相同的方式为 Tailwind 添加自己的主题的最佳方法是什么？

该类dark包含在 HTML 标记中，表示页面现在处于深色模式，并且我们dark:在定义类以在该模式下设置样式时使用选择器。

我的问题 - 我们如何向 HTML 标签添加额外的类，并在样式中使用额外的自定义选择器来设置该特定变体的样式？

我已经阅读了 Tailwind 官方网站上的一些插件和变体文档，但不太清楚这里的正确方法是什么。

Answer 1

正确的方法是基于意见的。html您可以在或或任何“全局”选择器上使用类body，使用自定义data-attributes（如data-theme）等

这是我使用CSS 选择器根据元素切换主题的示例:has.theme

它在某些浏览器下不可用，因为并非所有主题都支持:hasCSS 选择器

为了使用自定义变体，为其编写简单的插件

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--red或theme--green类.theme

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