如何在 Tailwind css 中设置多个主题答案

【问题标题】：How to set multiple themes in Tailwind css如何在 Tailwind css 中设置多个主题
【发布时间】：2022-10-01 15:11:05
【问题描述】：

我知道如何在顺风中设置深色和浅色主题，我要问的是我将如何扩展它以包括不同的主题，比如有一个名为粉色、蓝色、红色等的主题，并且就像你说的深色模式


<p className=\"text-black dark:text-white\">Color</p>

但我想做的是能够做到这一点


<p className=\"text-black dark:text-white orange:text-orange blue:text-blue\">Color</p>

这是可能的常规顺风CSS吗？

我也使用下一个主题在深色和浅色主题之间切换，它说像这样将不同的主题传递给它


<ThemeProvider themes={[\'pink\', \'red\', \'blue\', \'light\', \'dark\']}>

我可以像这样在它们之间切换

 const { theme, setTheme } = useTheme()

<select
        value={theme}
        onChange={(e) => setTheme(e.target.value)}
        className=\"light-contrast:bg-orange-300\"
      >
        <option value=\"system\">System</option>
        <option value=\"dark\">Dark</option>
        <option value=\"light\">Light</option>
        <option value=\"light-contrast\">light-contrast</option>
        <option value=\"dark-contrast\">dark-contrast</option>
        <option value=\"dark-dimmed\">dark-dimmed</option>
      </select>

主题确实发生了变化，但我希望顺风能够选择它，然后像上面提到的那样设置正确的主题样式，比如pink:text-pink等

标签： css next.js themes tailwind-css

【解决方案1】：

你需要设置不同的主题 onst defaultConfig = require('path-to-default-config');

// theme-1-tailwind.config.js module.exports = { ...defaultConfig, theme: { ...defaultConfig.theme, colors: { ...defaultConfig.theme.colors, // add colors here } } };
// theme-2-tailwind.config.js
...

// theme-3.tailwind.config.js
....
像这样的东西，但不知道该怎么做

【讨论】：