如何使用 Tailwind CSS 创建多个主题？
Posted
技术标签:
【中文标题】如何使用 Tailwind CSS 创建多个主题？【英文标题】：How to create multiple themes using 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 变量的类名添加前缀。 【参考方案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 文件。在集成上，然后正在加载所需的主题文件。
【讨论】：
以上是关于如何使用 Tailwind CSS 创建多个主题？的主要内容，如果未能解决你的问题，请参考以下文章