私が最近取り組んでいるプロジェクトでは、Vite、Vue、Tailwind を利用しています。

カスタム カラーを使用してしばらく作業した後、混乱に直面しました。

テンプレートにカスタム カラーを追加して使用することは問題ではありませんでした。プロセスは Tailwind ドキュメントを使用すると非常に明確に説明されています

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

私の問題は、Vue テンプレートの動的および静的 CSS クラスでカスタム カラーを使用するときに発生しました。

npm run dev または vite でプロジェクトを実行すると、bg-custom-green-50 または text-custom-green-50 が機能せず、CSS ファイルに表示されませんでした。

私の理解では、完全な CSS クラス名がテンプレートに存在しない場合、tailwind はそれを追加したり、CSS ファイルに生成したりしません。

CSS クラス: text-custom-green-50 または bg-custom-green-50 がプロジェクト内の他の場所で使用されていないと仮定します

以下の例は機能しません

以下の例は機能します

2 つの例の違いは、text-custom-green CSS クラスがテンプレートに追加されるため、tailwind がそれを生成された CSS ファイルに追加することです。

これを解決するには、tailwind.config.js ファイル内のセーフリストにカスタム カラーまたは Tailwind クラスを追加します。

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

これらの色は、テンプレートで直接使用されていなくても、別のポイントで動的に追加された場合でも使用できます

他の誰かがこれを役に立てば幸いです。