Tailwind CSS: Classes not being applied の原因と解決策

概要

Tailwind CSSのユーティリティクラスがスタイルに反映されない問題です。

エラーメッセージ

``` スタイルが適用されない（エラーメッセージなし） ```

原因

contentの設定漏れ: スキャン対象にファイルが含まれていない
動的クラス名: テンプレートリテラルでの動的生成
ビルドキャッシュ: 古いCSSがキャッシュ
CSSのインポート忘れ: エントリーポイントでのインポート漏れ

解決策

1. contentの設定を確認

```javascript // tailwind.config.js module.exports = { content: [ ‘./src//*.{js,ts,jsx,tsx,mdx}’, ‘./pages//.{js,ts,jsx,tsx}’, ‘./components/**/.{js,ts,jsx,tsx}’, ‘./app/**/*.{js,ts,jsx,tsx}’, ], // … }; ```

2. 動的クラスを避ける

```jsx // 悪い例: 動的クラス（検出されない）

// 良い例: 完全なクラス名 const colorClasses = { red: ’text-red-500’, blue: ’text-blue-500’, };

// または safelist を使用 // tailwind.config.js module.exports = { safelist: [ ’text-red-500’, ’text-blue-500’, { pattern: /bg-(red|blue)-(100|500)/ }, ], }; ```

3. CSSをインポート

```css /* src/styles/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; ```

```javascript // pages/_app.js または app/layout.tsx import ‘../styles/globals.css’; ```

4. キャッシュをクリア

```bash rm -rf .next/cache rm -rf node_modules/.cache npm run dev ```

5. PostCSS設定を確認

```javascript // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; ```

よくある間違い

外部ライブラリのコンポーネントがcontentに含まれていない
CSS-in-JSとの競合
important: trueの設定漏れ

Tailwind CSS: Classes not being applied

概要