tailwind-css - Tailwind でコンポーネントのテーマを設定する方法

Question

現在 Bootstrap を使用している既存のプロジェクトに Tailwind を統合しています。コードベースは現在、異なるテーマを持つ 2 つの異なるサイトをサポートしています。Tailwind ですでに十分にサポートされている、より一般的なテーマ設定とは対照的に、個々のコンポーネントに固有のテーマ設定可能なスタイルを提供する慣用的な方法を見つけるのに苦労しています。

たとえば、両方のテーマで異なる背景色を持つ navbar コンポーネントのスタイルを設定するには、各サイトのテーマ構成にフィールドを追加し、そのコンポーネントに固有のスタイルを含め、プラグインを介してそれらのスタイルを追加します。

したがって、私の構成ファイルには次のようなものが含まれている可能性があります。

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'),
        }
      }])
    }
  ]
};

これは問題ありませんが、時間の経過とともにコンポーネントがどんどん追加されるため、ボイラープレートの量が必要になるため、少し面倒に感じます。それを行うためのより標準的な方法があるかどうか疑問に思っていますか?

明らかに、色の標準テーマを使用してコンポーネント プラグインから選択できると便利ですが、スタイリングの変更を最小限に抑えたいと考えているため、このユース ケースではあまり現実的ではありません。