Tailwindで配列に入れたcolorを指定したい
作成日
更新日
v4.x系
クラス名を完全な形で使う。
// だめ
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
// 完全な名前ならおｋ
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>https://tailwindcss.com/docs/theme
v3.x系
safelist（セーフリスト）を使う
Tailwind の safelist 機能を使えば、動的に使う予定のクラスを明示的に残すことができる。
export default {
content: [
"./routes/**/*.{ts,tsx}",
"./islands/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
],
darkMode: "media",
safelist: [
"bg-nav1",
"bg-nav2",
"bg-nav3",
"bg-nav4",
"text-nav1",
"text-nav2",
"text-nav3",
"text-nav4",
"hover:bg-nav1",
"hover:bg-nav2",
// 必要に応じて追加
],
theme: {
extend: {
colors: {
nav1: "var(--nav1)",
nav2: "var(--nav2)",
nav3: "var(--nav3)",
nav4: "var(--nav4)",
},
},
},
};
公開日
更新日