Question

我正在将Tailwind集成到当前正在使用Bootstrap的现有项目中。该代码库当前支持具有不同主题的两个不同站点。我正在努力找到一种惯用的方式来提供特定于各个 components 的主题风格，而不是更普通的主题，而Tailwind已经很好地支持了这种主题。

例如，要设置在两个主题中具有不同背景颜色的导航栏组件的样式，我只需在每个站点的主题配置中添加一个字段，其中包含该组件的特定样式，然后通过插件添加这些样式

所以我的配置文件可能包含以下内容：

const theme = process.env.SITE_THEME;

const darkTheme = {
  navbar: {
    'bg-color': '#333333',
    'text-color': '#F3F3F9',
    'border-color': '#000000'
  }
};

// const lightTheme = ...

module.exports = {
  theme: Object.assign({}, commonTheme, getThemeConfiguration(theme)),
  variants: {},
  plugins: [
    function ({ addComponents, theme }) {
      addComponents([{
        '.navbar': {
          height: '50px',
          border: `2px solid ${theme('navbar.border-color')}`,
          color: theme('navbar.text-color'),
          backgroundColor: theme('navbar.bg-color'),
        }
      }])
    }
  ]
};

这是可以的，但是随着时间的推移越来越多的组件被添加，所需的样板数量看起来有点麻烦。我想知道是否还有更规范的方法？

很显然，最好使用一个标准的颜色主题来使用并从components插件中选择颜色，但这在这种用例中并不可行，因为我希望最大程度地减少样式更改。

如何在Tailwind中设置主题主题

0 个答案: