我的网站需要一个来自数据库的动态主题，可能的值为 theme-1、theme-2 等。我想要每个主题更改网站的调色板，即 theme-1 的主要顺风颜色为绿色，但蓝色对于主题2。
我尝试过使用https://github.com/upupming/tailwindcss-themeable但这是一种矫枉过正，因为它会重新生成所有颜色，并且在每个类之前都有一个非常麻烦且很长的前缀。我想在 body 级别定义“theme-1”类，并按照此伪代码执行一些操作
.theme-2 {
/* primary-500 is now color: blue */
}
由于依赖性限制，我正在使用 Tailwind v2。
最佳答案
您可以使用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>
主题可以通过一些切换按钮或您喜欢的任何内容动态切换
关于javascript - 如何在 TailwindCSS 中拥有动态 'primary' 类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73150351/