コンテンツへスキップ

プラグイン

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

TailwindPHPには公式TailwindCSSプラグインのPHP移植版が含まれ、ネイティブのPHPプラグインAPIも利用できます。プラグインはユーティリティ、コンポーネント、バリアントを登録し、入力CSS内の@pluginディレクティブで読み込みます。組み込みプラグインは、Nodeを介して実行するのではなくPHPで実装された、JavaScript版と1:1の移植版です。セレクターと出力も同じです。現時点での例外として、typographyプラグインの要素修飾子（prose-headings:、prose-a:、…）はプラグインのバリアントに依存しますが、まだ適用されません（#10）。

@pluginの使用

@pluginでプラグイン名を指定します。組み込みプラグインには、それぞれのnpmパッケージ名を使います。ディレクティブと@import "tailwindcss/utilities.css";を組み合わせると、プラグインのクラスがutilitiesレイヤーに出力されます。

PHP
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<article class="prose prose-lg"><h1>Hello</h1><p>Content here</p></article>',
    'css' => '
        @plugin "@tailwindcss/typography";
        @import "tailwindcss/utilities.css";
    ',
]);

複数のプラグインをまとめて読み込めます。順序は問いません。

CSS
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
@import "tailwindcss/utilities.css";

@pluginを@mediaなどの別のat-ruleの中にネストすることはできません。また、未登録のプラグイン名を指定するとエラーになります。

プラグインのオプション

プラグイン名の後にCSSブロック構文を使うと、オプションを渡せます。キーはプラグインのオプション配列の要素に対応します。

CSS
@plugin "@tailwindcss/forms" {
    strategy: "class";
}

@plugin "@tailwindcss/typography" {
    className: "markdown";
}

@tailwindcss/formsプラグインはstrategy（baseまたはclass）を受け取ります。@tailwindcss/typographyではclassNameを指定して、生成されるproseクラス名を変更できます。すべてのオプションは各プラグインのページを参照してください。

組み込みプラグイン

プラグイン 説明
@tailwindcss/typography proseクラス。リッチテキスト向けのタイポグラフィ既定スタイルです。Typographyを参照してください。
@tailwindcss/forms リセット可能でスタイリングしやすいフォームコントロールです。Formsを参照してください。

カスタムプラグイン

PluginInterfaceを実装し、PluginAPIのメソッド（addUtilities、matchUtilities、addComponents、addVariant、themeなど）を使って独自のプラグインを作成します。registerPlugin(new MyPlugin())で登録すると、getName()が返す名前を@plugin "my-plugin"ディレクティブで解決できます。

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

インターフェース、完全な例、PluginAPIメソッドの全リファレンスについては、カスタムプラグインを参照してください。