@sourceディレクティブ

Markdownとして表示 GitHubで編集ドキュメント: 3843abd

@sourceは入力CSS内に記述します。inline()形式はクラス候補を追加または削除し、どこでも使えます。パス形式はクラス名をスキャンするテンプレートファイルを指定します。ファイルをスキャンするのはCLIのみで、指定したパスはまだ適用されません（パスの使用方法を参照）。

CSS

@import "tailwindcss";
@source "./templates";

@sourceディレクティブはコンパイル時に読み取られ、出力から削除されるため、生成されたCSSには現れません。パスは引用符で囲む必要があり、シングルクォートとダブルクォートのどちらも使用できます。

パス、グロブ、否定

パス形式では、ディレクトリ、グロブ、または否定パスを指定でき、ディレクティブは累積されます。

CSS

@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

パスの使用方法

コンパイラーは、TailwindPHP\compile()が返す配列のsourcesリストに、各パスディレクティブを['base' => …, 'pattern' => …, 'negated' => …]として記録します。このとき、baseにはbaseコンパイルオプションの値が使われます。コンパイラー自身がファイルを読み込むことはありません。

tw::generate()、tw::compile()、TailwindCompilerは、渡されたコンテンツだけをコンパイルします。パスディレクティブはここでは効果がありません。
CLIはsourcesを読み込みますが、現在のリリースでは、パスやグロブの指定にかかわらず、入力ファイルのディレクトリを再帰的にスキャンして、否定されていないすべてのパスを対象にします。また、notパスは完全に無視されるため、何も除外されません（#8）。現時点で機能する構成例を含む詳細は、CLIがスキャンする内容を参照してください。

インライン候補

@source inline(...)を使うと、スキャン対象ファイルに現れないクラスでも出力に強制的に含められます。実行時にクラス名を動的に組み立てる場合に便利です。

CSS

@source inline("flex p-4 m-2");

インライン候補ではバリアントも使えます。

CSS

@source inline("hover:bg-blue-500 focus:ring-2");

波括弧展開

インラインパターンは波括弧のグループを展開できるため、多数の候補を簡潔に列挙できます。

CSS

@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

無視するインライン候補

@source not inline(...)はinline()とは逆の働きをします。コンテンツ内で見つかった候補でも、一致するものを出力から取り除きます。ここでも波括弧展開を使えます。

CSS

@source not inline("legacy");
@source not inline("p-{1,2}");

検証ルール

@sourceはブロックではなくステートメントです。コンパイラーは次の形式を拒否します。

本文を持つディレクティブ — @source cannot have a body.
ネストされたディレクティブ（たとえば@media内） — @source cannot be nested.
引用符で囲まれていないパス — @source paths must be quoted.

CSS

/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

ファイルベースのビルドについてはCLIを、@importと仮想モジュールの解決についてはImportsを参照してください。