コンテンツへスキップ

CLI

./vendor/bin/tailwindphpは @tailwindcss/cli のPHP移植版で、Node.jsは不要です。ソースマップ(--map)を除き、同じビルドオプションを使いますが、コンテンツのスキャン方法は異なります。CLIがスキャンする内容を参照してください。composer require tailwindphp/tailwindphp後、バイナリはvendor/bin/にリンクされます。

PHPから実行時にCSSだけを使いたい場合は、代わりにAPIを使ってください。CLIは、スタイルシートをディスクに書き出すビルド工程で使います。

クイックスタート

シェル
# Build CSS from an input file
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css

# Watch for changes and rebuild
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css --watch

# Build minified for production
./vendor/bin/tailwindphp -i ./src/app.css -o ./dist/styles.css --minify

オプション

シェル
tailwindphp [-i input.css] [-o output.css] [--watch] [options…]

ロングオプションに値を指定するには=を使います:--input=./src/app.css、--output=./dist/styles.css、--cwd=/path/to/project。ロングオプションの後にスペース区切りで値を置く形式(--input ./src/app.css)は現在エラーにならず無視され、ビルドは既定値に戻ります(#13)。ショートオプションでは次の引数として値を指定します(-i ./src/app.css)。

オプション 説明 既定値
-i, --input 入力CSSファイル。--input=-の場合はstdinから読み込みます @import "tailwindcss"
-o, --output 出力ファイル -(stdout)
-w, --watch 変更を監視し、必要に応じて再ビルドします —
-m, --minify 出力を最適化して圧縮します —
--optimize 「圧縮せずに最適化」と説明されていますが、現在は--minifyと同様に圧縮します(#9) —
--cwd 現在の作業ディレクトリ .
-h, --help 使い方を表示します —
-V, --version バージョンを表示します —
-v, --verbose ビルド失敗時にスタックトレースを表示します —

--outputが-(既定値)の場合、コンパイル済みのCSSはstdoutに書き出されるため、ほかの場所へパイプできます。進行状況のメッセージ(バージョン表示とDone in …ms)はstderrに出力されます。

@tailwindcss/cliとは異なり、--mapオプションはありません。TailwindPHPはソースマップを生成しません。

入力CSS

Tailwindのimport、theme、ディレクティブを含むapp.cssを作成します。

CSS
@import "tailwindcss";

@theme {
    --color-brand: #3b82f6;
}

CLIがスキャンする内容

CLIのコンテンツスキャンは、現時点では@tailwindcss/cliと同じ方法で@sourceに従いません(#8)。現在のリリースでは、次のように動作します。

  • 入力CSSに @sourceファイルディレクティブがない場合、CLIは作業ディレクトリ(--cwd)を再帰的にスキャンします。vendor/とnode_modules/も対象ですが、.gitignoreは参照されません。
  • @sourceファイルディレクティブが1つ以上ある場合、CLIは入力ファイルのディレクトリを再帰的にスキャンします。ディレクティブ内のパスやglobは適用されません。src/app.cssと同じ場所にある@source "../templates"はsrc/をスキャンし、templates/はスキャンしません。
  • @source not "…" ディレクティブはスキップされ、何も除外しません。
  • コンパイラー自身が処理するため、@source inline("…") と @source not inline("…") は説明どおりに動作します。

次の拡張子を持つファイルのみ読み込まれます:php、html、htm、twig、blade.php、vue、jsx、tsx、svelte、astro、mdx。クラス名はtw::extractCandidates()と同様に、classおよびclassName属性から取得されます。そのため、PHPまたはJavaScript文字列にしかないクラスは見つかりません。そのようなクラスは@source inline("…")で明示的に指定してください。

修正されるまでは、スキャン対象ディレクトリの最上位に入力CSSファイルを置くのが確実です。

CSS
/* templates/app.css: scans templates/ recursively */
@import "tailwindcss";
@source "./";

notとinline()形式を含むディレクティブ構文については、@sourceを参照してください。

例

シェル
# Build from an input file
tailwindphp -i ./src/app.css -o ./dist/styles.css

# Build minified for production
tailwindphp -i ./src/app.css -o ./dist/styles.css -m

# Watch mode with minification
tailwindphp -i ./src/app.css -o ./dist/styles.css -w -m

# Run against a different working directory
tailwindphp -i app.css -o dist/styles.css --cwd=/path/to/project

CLIは出力ディレクトリが存在しない場合に作成します。入力ファイルがない場合や入力パスと出力パスが同じ場合は、エラーで終了します。ウォッチモードでは入力ファイルとスキャン対象ファイルを500 ms間隔で確認し、変更または新しいファイルの出現があれば再ビルドします。

グローバルインストール

グローバルにインストールすると、どこからでもtailwindphpを使えます。

シェル
composer global require tailwindphp/tailwindphp

# Now available globally
tailwindphp -i ./src/app.css -o ./dist/styles.css

プロジェクトの設定についてははじめにを、PHPから実行時にCSSを生成する方法についてはAPIを参照してください。