こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介します。
なお、本稿の内容は v4.1.11（2025年7月22日時点の最新版）のTailwind CSSを前提としています。
実現したいこと
冒頭、実現したいことを整理します。
Tailwind CSSでは、プロジェクト内で使用されているユーティリティクラスに応じて必要な分だけCSSを生成します。
v4以降のTailwind CSSでは、監視対象のディレクトリ・ファイルは自動的に判定されます。
以下のような構造の場合は、特段の設定なしにHTMLファイルがすべて監視対象になります。
. ├── hoge │ └── index.html ├── foo │ └── index.html ├── input.css ├── package.json └── package-lock.json
一方で今回実現したいのは、hogeディレクトリを監視対象から除外することです。
. ├── hoge // このディレクトリを監視対象から除外したい │ └── index.html ├── foo │ └── index.html ├── input.css ├── package.json └── package-lock.json
@source not()を使用すると除外設定ができる
@source()はTailwind CSSの設定ファイル（@import "tailwindcss";が明示されているCSSファイル）で、ソースファイルを明示するために使用します。
これの拡張である@source not()を使用すると特定のディレクトリを監視対象から除外できます。
構文は以下の通りです。
@source not"<設定CSSファイルの場所を起点にしたパス>"
なお、@source not()はv4.1.0で追加されました。Tailwind CSS導入済みのプロジェクトの場合はバージョンをご確認ください。
例えば、先にお示ししたプロジェクト構造で、hogeディレクトリを監視対象から除外したい場合は次のようにします。
@import "tailwindcss"; // hogeディレクトリを監視対象から除外 @source not "./hoge";
これで、hogeディレクトリ内のテンプレートファイルでユーティリティクラスを使用してもCSSが生成されなくなります。
まとめ
今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介しました。
公式ドキュメントにもある通り@source not()は、サードパーティ ライブラリなど、Tailwind クラスを使用しないことが分かっている大きなディレクトリがプロジェクト内に存在する場合に有用です。
Tailwind CSSを使用される方の一助となれば幸いです。ご精読ありがとうございました。
