@tailwindcss/cli が無視ディレクトリの入力ファイルを監視できるように

2026年06月17日 01:38 JST tailwindlabs/tailwindcss

https://github.com/tailwindlabs/tailwindcss/pull/20246

@tailwindcss/cli の --watch モードで、デフォルトで source (none) として除外されるフォルダにある入力 CSS ファイルの変更も検知し、ビルドが自動再実行されるようになりました。この変更は Issue #17632 で報告された監視不具合を直接解消します。

背景

--watch はファイルシステムの変化をトリガーに再コンパイルしますが、入力ファイル自体が無視ディレクトリにあるとスキャナの対象外となり、変更が反映されませんでした。Issue #17632 では assets/ フォルダがデフォルトで除外されるため、@tailwindcss/cli が期待通りにリビルドしないことが報告されています。開発者は手動でプロセスを再起動するしかなく、開発フローが阻害されていました。

技術的な変更

CHANGELOG エントリの追加

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0)

  - Ensure `@tailwindcss/cli` in `--watch` mode doesn't crash on Windows when `@source` points to a directory that doesn't exist ([#20242](https://github.com/tailwindlabs/tailwindcss/pull/20242))
  - Ensure `@tailwindcss/vite` doesn't crash in Deno v2.8.x when `context.parentURL` is not a valid URL ([#20245](https://github.com/tailwindlabs/tailwindcss/pull/20245))
+- Ensure `@tailwindcss/cli` in `--watch` mode rebuilds when the input CSS file changes in an ignored directory ([#20246](https://github.com/tailwindlabs/tailwindcss/pull/20246))

 ## [4.3.1] - 2026-06-12

このエントリは、--watch が入力ファイルの変更を検知できるようになったことをリリースノートとして明示しています。

ビルドコマンドのロジック修正

@@ -260,6 +260,14 @@ export async function handle(args: Result<ReturnType<typeof options>>) {
       negated: true,
     })

+    if (inputFilePath !== null) {
+      sources.push({
+        base: path.dirname(inputFilePath),
+        pattern: path.basename(inputFilePath),
+        negated: false,
+      })
+    }
+
     let scanner = new Scanner({ sources })
     DEBUG && I.end('Setup compiler')

inputFilePath が指定されている場合に、そのディレクトリとファイル名を sources 配列へ追加しています。これにより Scanner が無視設定を上書きし、入力ファイル自体の変更も監視対象になります。既存の negated: true 設定はそのまま残すことで、他の除外パターンは影響を受けません。

監視動作を検証する統合テストの追加

@@ -404,6 +404,57 @@ describe.each([
     },
   )

+  // https://github.com/tailwindlabs/tailwindcss/issues/17632
+  test(
+    'watch mode rebuilds when the input file is in an ignored folder',
+    {
+      fs: {
+        'package.json': json`
+          {
+            "dependencies": {
+              "tailwindcss": "workspace:^",
+              "@tailwindcss/cli": "workspace:^"
+            },
+          }
+        `,
+        'assets/tailwind.config.js': js`
+          module.exports = {
+            content: {
+              relative: true,
+              files: ['html/*.html'],
+            },
+          }
+        `,
+        'assets/html/index.html': html`
+          <div class="underline"></div>
+        `,
+        'assets/css/index.css': css`
+          @import 'tailwindcss' source(none);
+          @config '../tailwind.config.js';
+        `,
+      },
+    },
+    async ({ fs, spawn }) => {
+      let process = await spawn(
+        `${command} --input assets/css/index.css --output dist/out.css --watch`,
+      )
+      await process.onStderr((m) => m.includes('Done in'))
+
+      await fs.expectFileToContain('dist/out.css', [candidate`underline`])
+
+      await fs.write(
+        'assets/css/index.css',
+        css`
+          @import 'tailwindcss' source(none);
+          @config '../tailwind.config.js';
+          @source inline("flex");
+        `,
+      )
+    }
+  )
*** End Patch
*** End Patch

テストは assets/ ディレクトリ以下に配置した index.css を変更し、dist/out.css が正しく更新されることを確認します。fs.write で新たに @source inline("flex") を書き込んだ後でもビルドが走る点が重要です。Issue #17632 を直接参照し、修正の効果をエンドツーエンドで保証しています。

設計判断

入力ファイルを sources 配列に明示的に追加する方針が採用されました。代替案として @source ディレクティブを自動生成する手法も考えられましたが、既存のスキャナロジックを最小変更で拡張でき、後方互換性を保持できる点が選択理由です。negated: false にすることで無視設定を上書きし、無視ディレクトリ内でも確実に変化を捕捉できます。

まとめ

本 PR は @tailwindcss/cli の --watch モードにおいて、無視ディレクトリに配置された入力 CSS ファイルの変更を検知できなかった問題を解消します。入力ファイルを監視リストに自動追加するシンプルな実装で、既存のビルドフローと互換性を保ちつつ開発体験を向上させました。