如何使用 Tailwind CSS 创建多个主题？答案

【问题标题】：How to create multiple themes using Tailwind CSS?如何使用 Tailwind CSS 创建多个主题？
【发布时间】：2021-11-08 01:15:41
【问题描述】：

查看 Tailwind CSS，您似乎需要在类中指定特定颜色，如下所示：

<div class="bg-yellow-200 dark:bg-gray-800"></div>

但是，如果我想提供 10 种不同的主题供用户在我的网络应用程序中选择怎么办？就像我可能有 halloween 和 summer 和 winter 和 party 等主题。

我知道使用常规 CSS 很容易做到这一点：

[data-theme="halloween"] {
    --color-bg: #000;
    --color-body: #757981;
}

<body data-theme="halloween"></div>

然后使用 Javascript，我可以更改 data-theme 属性，然后主题就会改变。

但是我怎么能用 Tailwind CSS 做到这一点呢？我在文档中找不到任何关于此的内容。

【问题讨论】：

您尝试过文档吗？ tailwindcss.com/docs/theme
@Quentin 我看到它只讨论如何配置默认主题而不是如何添加更多主题。
不幸的是，它似乎并不像在配置中添加主题那么简单。似乎this answer 可能会为您指明正确的方向。它建议使用插件为使用定义主题的 CSS 变量的类名添加前缀。

标签： html css tailwind-css

【解决方案1】：

我确实找到了使用 CSS 变量的解决方案。

在您的 css 文件中，您可以像这样为每个主题定义样式

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    [data-theme="default"] {
        --color-esther: 34, 39, 46;
        --color-maximus: 45, 51, 59;
        --color-linx: 55, 62, 71;
    }

    [data-theme="neon"] {
        --color-esther: 20, 61, 42;
        --color-maximus: 13, 82, 66;
        --color-linx: 20, 82, 11;
    }
}

然后在您的tailwind.config.js 文件中，您可以像这样定义它们

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

function withOpacity(cssVariable) {
    return ({ opacityValue }) => {
        return `rgba(var(${cssVariable}), ${opacityValue})`
    }
}

module.exports = {
    //...

    theme: {
        colors: {
            'esther':       withOpacity('--color-esther'),
            'maximus':      withOpacity('--color-maximus'),
            'linx':         withOpacity('--color-linx'),
        },
    },
}

在您的 html 中，您可以像这样使用这些类：

<html lang="en" data-theme="default">
    <body class="bg-esther text-optimus cursor-default">

    </body>
</html>

【讨论】：

这似乎是一个很棒的解决方案，但按照你的步骤我得到--color-esther is not defined imgur.com/a/FnkeB3p
@Justin 请提供完整的代码示例，以便我查看一下，看看有什么问题
@MartinZeltin 在基础层添加属性选择器有什么意义？通常它只用于标签选择器

【解决方案2】：

只是偶然发现了这个问题，因为我正在做几年前我已经做过的事情，但现在已经不记得了。如果有人再次来到这里，也许这个答案可能会有所帮助。

在我们的例子中，我们正在构建一个应用于 3 个不同网站但明显改变颜色和字体的主题，这似乎与问题作者的情况相同。

为此，可以使用tailwind presets。我有一个tailwind.preset.js，它基本上是带有所有基本颜色、间距等的默认顺风配置。对于每个主题，设置了一个单独的tailwind.<theme-name>.js，其中包含更改并以预设为基础。

例如tailwind.theme-one.js:

module.exports = {
  presets: [
    require('./tailwind.preset.js')
  ],
  theme: {
    colors: {
      # color changes go here
    }
  }
}

我们设置了一个 gulp 工作流程，基本上只为每个主题配置呈现一次主 scss 文件。在集成上，然后正在加载所需的主题文件。

【讨论】：