フレームワーク
Tailwind CSS
クラス名でスタイルを記述する utility-first の CSS フレームワーク。JIT エンジンで使用クラスのみを抽出し、React / Next.js / Vue などの UI フレームワークと組み合わせて広く使われる。
問題一覧（7）
Tailwind CSS で @apply ディレクティブが効かない
@apply は Tailwind の PostCSS プラグインを通った CSS の中でのみ展開される。CSS Modules や scoped style、別パイプラインで処理された .css では無効化される。globals.css に書くか、Tailwind v4 では @reference を冒頭に追加する。
更新: 2026-08-18、実行例あり、タグ: apply、directive、postcss
Tailwind CSS の任意値 (arbitrary value) が反映されない
w-[123px] のような任意値は完全文字列として静的解析されないと出力されない。値部分を変数で組み立てる、content 設定にファイルが無い、値内にスペースがある、のいずれかが原因。完全文字列で書きスペースは _ で代用する。
更新: 2026-08-22、タグ: arbitrary、jit、content
Tailwind CSS のクラスが効かない（スタイルが反映されない）
Tailwind は content で指定したファイルをスキャンして使用クラスだけを CSS に含める。content パスの抜け、@tailwind ディレクティブ未読込、PostCSS プラグイン未登録、設定変更後の再起動忘れの 4 系統が大半を占める。
更新: 2026-08-16、実行例あり、タグ: content、configuration、jit
Tailwind CSS の dark モードが切り替わらない／適用されない
darkMode の設定値（media / class / selector）と HTML 側のトグル方法がずれているのが大半の原因。Tailwind v4 は CSS-first 設定（@variant dark）に変わったため、バージョン確認も同時に行う。
更新: 2026-06-16、タグ: dark-mode、theme、jit
Tailwind CSS で動的に組み立てたクラス名が反映されない
Tailwind の JIT スキャナはソース上の完全な文字列だけをクラス候補に拾う。bg-${color}-500 のような実行時補完は検出されず CSS に出力されない。完全文字列を分岐で書く、safelist に登録する、arbitrary value で逃がす、のいずれかで解決する。
更新: 2026-08-17、実行例あり、タグ: dynamic、safelist、content
Tailwind CSS の prose クラス（typography プラグイン）が適用されない
prose は Tailwind 本体ではなく @tailwindcss/typography プラグインで提供される。プラグイン未導入、tailwind.config の plugins 未登録、Tailwind v4 での @plugin 漏れ、content スキャン対象外のいずれかで剥がれる。v3 と v4 で導入方法が違う点に注意する。
更新: 2026-08-03、タグ: typography、prose、plugin
Tailwind CSS v4 で PostCSS 設定がエラーになる
Tailwind v4 は PostCSS プラグインを別パッケージ @tailwindcss/postcss に分離した。postcss.config.js で tailwindcss: {} のままだとエラーになるため、@tailwindcss/postcss に置き換える必要がある。
更新: 2026-07-31、タグ: v4、postcss、config