Tailwind CSS v4: @sourceがNext.jsの[...slug]にマッチしないの原因と解決策

概要

Tailwind CSS v4で@sourceディレクティブを使用してソースファイルを指定する際、./**/*.{js,ts,jsx,tsx}のようなglobパターンがNext.jsの[...slug]などのcatchallルートセグメントを含むディレクトリにマッチしない問題です。

エラーメッセージ

エラーメッセージは表示されませんが、[...slug]ディレクトリ内のファイルで使用しているTailwindクラスがCSSに含まれません。

1
2
3
4
5
/* app/globals.css */
@import 'tailwindcss' source(none);
@source './**/*.{js,ts,jsx,tsx,mdx}';

/* [...slug]/page.tsx のクラスが検出されない */

原因

globパターンの解釈: [と]はglobパターンで特殊文字（文字クラス）として解釈される
ファイルシステムのエスケープ: [...slug]の[がglobの文字クラス開始として認識される
上流ライブラリの問題: Tailwindが使用する@parcel/watcherやglobライブラリの動作

解決策

1. 追加の@sourceパターンを指定

1
2
3
@import 'tailwindcss' source(none);
@source './**/*.{js,ts,jsx,tsx,mdx}';
@source './[[]**[]]/*.{js,ts,jsx,tsx,mdx}';

[[]と[]]はglobのエスケープ構文で、リテラルの[と]にマッチします。

2. 自動検出を使用（推奨）

1
2
/* source(none)を削除して自動検出を有効化 */
@import 'tailwindcss';

3. 特定のディレクトリを明示的に指定

1
2
3
4
@import 'tailwindcss' source(none);
@source './app/**/*.{js,ts,jsx,tsx,mdx}';
@source './components/**/*.{js,ts,jsx,tsx,mdx}';
@source './app/[[]...slug[]]/**/*.{js,ts,jsx,tsx,mdx}';

4. content設定で対応（v3互換）

1
2
3
4
5
6
7
// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './app/\\[...slug\\]/**/*.{js,ts,jsx,tsx,mdx}',
  ],
};

5. safelist を使用

1
2
3
4
5
6
7
@import 'tailwindcss';

/* 確実に含めたいクラスを明示 */
@utility safelist {
  .text-red-500 { }
  .bg-blue-100 { }
}

6. PostCSS設定で対応

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {
      content: [
        './app/**/*.{js,ts,jsx,tsx}',
        // エスケープされたパターン
        './app/\\[...slug\\]/**/*.{js,ts,jsx,tsx}',
      ],
    },
  },
};

よくある間違い

[と]をエスケープせずにglobパターンで使用する
Next.jsの動的ルート（[id]、[[...slug]]）がすべて検出されると仮定する
source(none)を設定した後、すべてのソースパスを正しく指定しない

Tailwind CSS v4: @sourceがNext.jsの[...slug]にマッチしない

概要