はじめに

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

インストール

シェル

composer require tailwindphp/tailwindphp

TailwindPHPにはPHP 8.2以降、ctypeとmbstring拡張機能、およびComposerが必要です。これらの拡張機能はほとんどのPHPビルドと公式Dockerイメージに含まれていますが、composer.jsonにはまだ記載されていません（#11）。そのため、拡張機能なしでビルドすると、パッケージのインストール後に実行時エラーが発生します。Node.js依存関係もビルド工程も不要で、DockerイメージやCIにnpmを追加する必要もありません。composer requireしてAPIを呼び出すだけです。

最初のCSSを生成する

PHP

<?php

require __DIR__ . '/vendor/autoload.php';

use TailwindPHP\tw;

$css = tw::generate('<div class="flex items-center p-4 bg-blue-500">Hello</div>');

generate()はマークアップをスキャンしてクラス名を抽出し、それらのクラスに必要なCSSだけを出力します。第2引数を省略すると、theme、Preflight、utilitiesレイヤーを取り込む既定の@import "tailwindcss"が使われます。

CSS文字列によるカスタマイズ

入力CSS文字列を第2引数に渡すと、@theme変数、カスタムルール、ディレクティブを追加できます。新しいtheme値は自動的にユーティリティになります。

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)

themeの名前空間一覧はThemeを参照してください。

配列入力

1行を超える内容には、contentキーとcssキーを含む配列を渡します。@applyを使ったコンポーネント定義にも使用できます。

PHP

use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4 btn">Hello</div>',
    'css' => '
        @import "tailwindcss";

        @theme {
            --color-brand: #3b82f6;
            --font-heading: "Inter", sans-serif;
        }

        .btn {
            @apply px-4 py-2 rounded-lg bg-brand text-white;
        }
    ',
]);

配列形式では、minify、importPaths、cache、cacheTtlも使用できます。入力形式については使い方を、@apply、@theme、@utilityなどについてはディレクティブをご覧ください。

ファイルに書き込む

generate()は文字列を返すため、スタイルシートの書き込みは1行でできます。

PHP

use TailwindPHP\tw;

file_put_contents('dist/styles.css', tw::generate([
    'content' => file_get_contents('templates/page.html'),
    'css' => '@import "tailwindcss";',
]));

テンプレートディレクトリをスキャンするファイルベースのビルドやウォッチモードには、代わりにCLIを使ってください。@tailwindcss/cliビルドオプションを利用できますが、現時点ではTailwindとは異なるコンテンツスキャンを行います。スキャン対象はCLIページを参照してください。

本番用に圧縮する

生成時に出力を圧縮するにはminify => trueを渡すか、既存の文字列にtw::minify()を呼び出します。

PHP

use TailwindPHP\tw;

// Minify during generation
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'minify' => true,
]);

// Or minify separately
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);

圧縮処理ではコメントを削除し、空白をまとめ、16進カラー（#ffffffから#fff）を短縮し、ゼロ値の単位（0pxから0）を削除します。キャッシュの設定についてはキャッシュと圧縮を参照してください。

次のステップ

使い方 — generateの手順、コンテンツスキャン、入力形式。
クラスユーティリティ — cn()、merge()、join()、variants()。
プラグイン — タイポグラフィ、フォーム、カスタムプラグイン。
API — tw機能の全容と再利用可能なコンパイラーインスタンス。
CLI — Node.jsなしで行うファイルベースのビルドとウォッチビルド。