変数にするとtailwindが効かない

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

こんな感じでclass名を一部変数にした場合, 公式 にも書かれている通りCSSが効かない場合がある.

こんな時はtailwind.config.mjsにsafelistを追加すると良い.

//tailwind.config.mjs

export default {
    content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
++  safelist: [{ pattern: /^(bg|text)-.+-(\d+)$/, variants: ["hover"] }],