Vue Tailwind クラスと動的クラス

私が最近取り組んでいるプロジェクトでは、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 がプロジェクト内の他の場所で使用されていないと仮定します

以下の例は機能しません

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

以下の例は機能します

<template>
    <h3 :class="['font-bold', colorClass]">{{ heading }}</h3>
    <p class="text-custom-green">Green text</p>
</template>
<script type="text/javascript">
    const colorClass = ref('')

    // color being set somewhere else in the component logic
    colorClass.value = 'text-custom-green-50'
</script>

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'
    ]
}

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

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

以上がVue Tailwind クラスと動的クラスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。