1

我正在将 Tailwind 集成到当前正在使用 Bootstrap 的现有项目中。该代码库目前支持两个具有不同主题的不同站点。我正在努力寻找一种惯用的方式来提供特定于单个组件的主题样式，而不是更通用的主题，这显然已经得到 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'),
        }
      }])
    }
  ]
};

这没关系，但随着时间的推移，随着越来越多的组件被添加，所需的样板数量感觉有点麻烦。我想知道是否有更规范的方式来做到这一点？

显然，使用标准颜色主题并从组件插件中选择颜色会很好，但这对于这个用例来说不太可行，因为我希望最大限度地减少样式更改。

4

0 回答 0