コンテンツへスキップ

TailwindPHP

TailwindCSS 4.xをPHPに移植。TailwindユーティリティCSSをPHPで生成でき、Node.jsもビルド工程も不要です。cn()、tailwind-merge、CVA、typographyとformsプラグイン、さらにCLIを同梱しています。

ターミナル
composer require tailwindphp/tailwindphp
はじめる
GitHub (新しいタブで開きます)

最新リリース v1.7.0 MIT PHP 8.2+

実践例

マークアップと任意の入力CSSを1回のPHP呼び出しに渡すと、スタイルシートが返されます。

PHPからCSSを生成

tw::generate()はマークアップをスキャンしてクラス名を探し、それらのクラスに必要なCSSだけを返します。第2引数には入力CSSを渡せるため、@themeで定義した色もユーティリティになります。

cn()はクラス文字列を組み立ててTailwindの競合を解決するため、競合するユーティリティは最後のものが優先されます。

スタートガイドを読む
PHP
use TailwindPHP\tw;

$css = tw::generate(
    '<div class="bg-brand p-4">Hello</div>',
    '@import "tailwindcss"; @theme { --color-brand: #3b82f6; }'
);
// .bg-brand now resolves to var(--color-brand)

純粋なPHP

Node.jsもビルド工程も不要です。標準のmbstringおよびctype拡張機能を備えたPHP 8.2以降で動作します。composer requireを実行すればすぐに使えます。

TailwindCSS v4.3.3に追従

Tailwind v4.3.3を移植し、同じユーティリティ、バリアント、ディレクティブを提供します。Tailwindとの既知の差異は文書化されています。

4,400以上のテスト

TailwindCSS独自のテストスイートから抽出したTypeScriptソースで出力を検証し、プッシュのたびに再実行します。

すべてのユーティリティとバリアント

ユーティリティ一式とすべてのバリアントに対応: hover、focus、レスポンシブ、ダークモード、コンテナークエリー、任意の値。

CSSディレクティブ

@import、@theme、@apply、@utility、@custom-variant、@layer、@plugin、@sourceをPHPで解析・解決します。

実行時生成

HTML、データベースのコンテンツ、テンプレート変数からユーティリティCSSをその場で生成します。ビルド工程は不要です。

必要なものを同梱

cn()、merge()、join()、variants()を同梱。clsx、tailwind-merge、CVAをPHPに移植しており、追加パッケージは不要です。

プラグイン

@tailwindcss/typographyと@tailwindcss/formsをPHPに移植。さらに独自のユーティリティやコンポーネントを作成できるPHPプラグインAPIも用意しています。

CLI

bin/tailwindphpは入力CSSファイルからスタイルシートを生成します。-i、-o、--watch、--minifyを使用できます。

テーマを調べる

PHPから、任意のクラスのプロパティ値（元の値と計算後の値）、色、ブレークポイント、スペーシングを直接読み取れます。

キャッシュとミニファイア

組み込みのCSSミニファイアとTTL付きファイルキャッシュにより、繰り返しのビルドを高速化し、出力を軽量に保ちます。

WordPressおよびPHPフレームワーク

スタックにNode.jsを必要とせず、Tailwindベースのテーマやプラグインを提供できます。TailwindPHPはComposerの単一依存パッケージです。

TailwindPHPを選ぶ理由

本番環境で単一のランタイム

Tailwindを採用するPHPプロジェクトでは通常、Node.js、npmのインストール、CIとDockerでのビルド工程も必要になります。TailwindPHPはその代わりに、CSSをPHPプロセス内でコンパイルします。

実行時に決まるコンテンツに対応するCSS

データベース、ユーザー入力、テンプレート変数から取得したマークアップをそのままtw::generate()に渡せます。クラスに必要なCSSだけが返されます。

固定したTailwindリリースに照らして検証

リポジトリ内で固定されたTailwindソースからテストケースを抽出し、PHPの出力に対して実行します。差異があればCIが失敗します。リリース1.7.0はTailwind v4.3.3に照らして4,427件のテストで検証済みです。

1つのコンパイラーでページごとにCSS

tw::compile()でテーマを一度コンパイルし、各ページでgenerateExact()を呼び出します。各呼び出しはテーマを再解析せず、そのページをtw::generate()状態からコンパイルした場合と同じ結果を返します。

との比較

Tailwind LabsはTailwind CSSをビルドする独自の方法を提供しています。TailwindPHPとの違いを説明します。

他のツールとTailwindPHPの比較
Tailwind CLI (@tailwindcss/cli) 得意なことTailwind公式のコマンドラインツールで、npmからインストールできます。HTMLファイル、コンポーネント、テンプレートからクラス名を探し、一致するスタイルを静的なCSSファイルに書き込みます。 TailwindPHPとの違いTailwindPHPはPHP内でコンパイルするため、Node.jsもnpmのインストールも不要です。固定されたTailwindリリース（1.7.0ではv4.3.3）に追従します。独自ベンチマークでは、TypeScriptのオリジナルのほうが低レベル操作を高速に実行します。
Tailwind単体のCLI 得意なことTailwind CLIを単体実行ファイルとして提供します。Node.jsをインストールせずに使いたいプロジェクトに適しています。 TailwindPHPとの違い実行ファイルはビルド工程として動く別個のバイナリです。TailwindPHPはPHPコードから呼び出すComposerパッケージなので、データベースのコンテンツやテンプレート変数からリクエスト時にCSSを生成することもできます。
Tailwind Play CDN 得意なことブラウザーでTailwindを実行するscriptタグです。ビルド工程なしで試せます。Tailwindのドキュメントでは、開発向けに設計されており、本番環境での使用は想定されていないと説明されています。 TailwindPHPとの違いTailwindPHPもビルド工程は不要ですが、サーバー上のPHPでCSSを生成し、文字列として返します。たとえばスタイルシートへの書き込みに利用できます。

出典、チェック済み

質問と回答

TailwindPHPのドキュメントから、簡潔に回答します。

ドキュメントを読む

Composerでパッケージをインストールし、スタートガイドに沿ってPHPから最初のスタイルシートを生成しましょう。

ドキュメントを読む
ソースを表示 (新しいタブで開きます)