Mar*_*tin 27 html css tailwind-css
查看 Tailwind CSS，似乎您需要在类中指定特定颜色，如下所示：
<div class="bg-yellow-200 dark:bg-gray-800"></div>
但是，如果我想在我的 Web 应用程序中提供 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 做到这一点呢？我在文档中找不到与此相关的任何内容。
Mar*_*tin 31
我确实找到了使用 CSS 变量的解决方案。
在 CSS 文件中，您可以为每个主题定义样式，如下所示
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html[data-theme='default'] {
--color-esther: 34, 39, 46;
--color-maximus: 45, 51, 59;
--color-linx: 55, 62, 71;
}
html[data-theme='neon'] {
--color-esther: 20, 61, 42;
--color-maximus: 13, 82, 66;
--color-linx: 20, 82, 11;
}
}
然后在你的tailwind.config.js文件中你可以这样定义它们
顺风版本^3.1
module.exports = {
theme: {
colors: {
esther: 'rgb(var(--color-esther) / <alpha-value>)',
maximus: 'rgb(var(--color-maximus) / <alpha-value>)',
linx: 'rgb(var(--color-linx) / <alpha-value>)',
},
},
}
Tailwind 低于 3.1 版本
function withOpacity(cssVariable) {
return ({ opacityValue }) => {
return opacityValue ? `rgba(var(${cssVariable}), ${opacityValue})` : `rgb(var(${cssVariable}))`
}
}
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>
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({
halloween: {
'primary': 'orange',
'secondary': 'yellow',
},
summer: {
'primary': 'pink',
'secondary': 'red',
},
winter: {
'primary': 'blue',
'secondary': 'green',
},
party: {
'primary': 'steelblue',
'secondary': 'darkblue',
},
})
],
};
在类中使用这样的主题：
<html class='theme-halloween'>
...
</html>
或者使用数据属性：
<html data-theme='halloween'>
...
</html>
然后像平常一样使用顺风课程。具有该类的按钮bg-primary将根据最接近的主题改变颜色。
可以使用一些切换按钮或您喜欢的任何内容动态切换主题
有几个插件支持定义多个 Tailwind 主题并在它们之间进行切换。我特别喜欢tailwindcss-themer 插件，因为它允许您：
text-primary）。这使代码保持干净并且独立于插件（与其他插件相反，其他插件有时需要每个 CSS 类都有特定的前缀）my-theme:font-bold只是偶然发现了这个问题，因为我正在做与几年前相同的事情，但我不记得了。如果有人再次来到这里，也许这个答案可能会有所帮助。
在我们的例子中，我们正在构建一个应用于 3 个不同网站的主题，但明显改变了颜色和字体，这似乎与问题作者的情况相同。
为此，可以使用顺风预设。我有一个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 文件。在集成上，随后将加载所需的主题文件。
| 归档时间： |
|
| 查看次数： |
23641 次 |
| 最近记录： |