コンテンツへスキップ

TailwindPHP

TailwindPHPはTailwindCSS 4.xのPHP向け1:1移植版です。CSSを解析し、マークアップからクラス名をスキャンして、TailwindCSS v4.3.3が生成するものと同じユーティリティCSSを、PHPだけで生成します。Node.jsもビルド工程も不要です。

  • 純粋なPHP — Composerパッケージとして提供され、標準のctypeおよびmbstring拡張機能を備えたPHP 8.2以降で動作します。exec、FFI、ネイティブビルドツールは不要です。
  • TailwindCSSとの照合済み — ユーティリティ、バリアント、ディレクティブ、CSS関数はTailwindCSS v4.3.3に準拠しています。出力はTailwind独自のテストスイートと照合し、TypeScriptソースから抽出したテストをプッシュごとに再実行しています(4,400件以上)。カスケードに影響しないシリアライズ上の細かな違いと未解決の問題は、互換性とアップグレードに記載しています。
  • 機能一式 — TailwindCSS v4.3.3のユーティリティ一式(container、スクロールバー用ユーティリティ、zoom-*、tab-*を含む)、すべてのバリアント(hover、focus、レスポンシブ、ダークモード、コンテナクエリ、任意の値)、およびディレクティブ一式(@import、@theme、@apply、@utility、@variant、@custom-variant、@layer、@plugin、@source)を備えています。
  • 必要な機能を同梱 — cn()、merge()、join()、variants()にはclsx、tailwind-merge、CVAのPHP移植版が含まれています。Tailwindプロジェクトでよく使われる補助ライブラリをすぐに利用できます。
  • プラグイン — @tailwindcss/typographyと@tailwindcss/formsは完全に移植されており、独自のプラグインを作成できるAPIPHPもあります。

TailwindPHPが作られた理由

TailwindCSSはTypeScriptで書かれ、Node.js上で動作します。Tailwindを使いたいPHPプロジェクトには、2つ目のランタイム、npmのインストール、CIやDockerでのビルド工程が必要になります。多くのPHPアプリケーションにとって、これは避けたい負担です。

TailwindPHPはその負担をなくします。PHPコードからTailwind CSSを直接コンパイルし、標準ライブラリだけを使用します。これにより、JavaScriptツールチェーンでは難しい、または不可能だったことが実現できます。

  • WordPressおよびPHPフレームワーク — Tailwind対応のテーマやプラグインを、利用者にNode.jsのインストールやビルドを求めずに提供できます。composer requireするだけです。TailwindWPは、TailwindPHPでブロックエディター用CSSを生成するWordPressプラグインの例です。
  • 実行時のCSS — ビルド時ではなく、ユーザー入力、データベースの内容、テンプレート変数からユーティリティCSSをその場で生成できます。
  • デプロイの簡素化 — 本番環境にNode.jsは不要。CIでのビルド工程もDockerイメージ内のnpmも不要です。

それはscssphpがSCSSにもたらしたのと同じ発想です。つまり、完全なコンパイラーをPHPで実現します。

機能

  • コンテンツ内のクラス名からTailwindCSS v4.3.3のユーティリティセット、バリアント、任意の値をコンパイルします。
  • ディレクティブ全体に対応します。@import(tailwindcssやtailwindcss/utilitiesなどの仮想モジュール、referenceのインポートを含む)、@theme、@apply、@utility、@variant、@custom-variant、@layer、@plugin、@sourceを解決します。
  • TailwindのCSS関数、theme()、--theme()、--spacing()、--alpha()を実装し、color-mix() → oklab()の変換と、TailwindCSSがLightningCSSに委ねるCSS変換にも対応します。
  • ネストしたインポート、重複排除、カスタムリゾルバーを使ってファイルシステムから@importを解決するか、インラインのCSS文字列から解決します。
  • Preflight(Tailwindのベースリセット)、プレフィックス対応、@propertyのフォールバック、ベンダープレフィックス付与、キーフレームの集約を備えています。
  • クラス名の構築、競合の解決、コンポーネントのバリアントに使うcn()、merge()、join()、variants()/compose()をバンドルしています。
  • typographyプラグインとformsプラグインに加え、カスタムプラグイン用のプラグインAPI(addUtilities、matchUtilities、addComponents、addVariant、theme、…)を含みます。
  • @tailwindcss/cliビルドオプションを備えたCLI(bin/tailwindphp)を提供します。ファイルベースの出力キャッシュ、永続的なコンパイラー状態キャッシュ、本番環境用のCSSミニファイアも利用できます。

merqlでできないこと

TailwindPHPはCSSコンパイラーであり、エディター用ツールチェーンではありません。Tailwindエコシステムのうち、IDE向けの機能であるIntelliSense、自動補完、クラスの並べ替え、ソースマップは意図的に含めていません。これらはCSS生成ではなくエディターの機能だからです。CSSを生成するものはすべて対象ですが、エディターを支援する機能は対象外です。

まず読むページ

  • はじめに — パッケージをインストールして、最初のスタイルシートを生成します。
  • 使い方 — コンテンツをスキャンし、テーマをカスタマイズして、Tailwindのディレクティブを使います。
  • クラスユーティリティ — cn()、merge()、join()、variants()。
  • プラグイン — typography、forms、自作プラグイン。
  • API — twの全機能とTailwindCompilerインスタンス。
  • CLI — ファイルベースのビルドとウォッチモード向けのbin/tailwindphp。
  • 応用 — アーキテクチャ、キャッシュ、パフォーマンス、互換性に関する注意事項。