Plugins

TailwindPHP liefert PHP Umsetzungen der offiziellen TailwindCSS-Plugins und stellt ein natives PHP-Plugin API bereit. Plugins registrieren Utilities, Komponenten und Varianten; sie werden mit der Direktive @plugin in deiner Eingabe CSS geladen. Die integrierten Plugins sind 1:1-Umsetzungen ihrer JavaScript-Entsprechungen – mit denselben Selektoren und Ausgaben –, implementiert in PHP, statt über Node ausgeführt zu werden. Eine Ausnahme gibt es derzeit: Die Element-Modifikatoren des Typography-Plugins (prose-headings:, prose-a:, …) benötigen Plugin-Varianten, die noch nicht angewendet werden (#10).

@plugin verwenden

Verweise mit @plugin anhand des Namens auf ein Plugin. Integrierte Plugins verwenden den Namen ihres npm-Pakets. Ergänze die Direktive um @import "tailwindcss/utilities.css";, damit die Klassen des Plugins in die Utilities-Ebene ausgegeben werden:

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";
    ',
]);

Mehrere Plugins lassen sich gemeinsam laden; ihre Reihenfolge spielt keine Rolle:

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

@plugin darf nicht innerhalb einer anderen At-Regel (wie @media) verschachtelt sein. Bei einem nicht registrierten Plugin-Namen wird ein Fehler ausgelöst.

Plugin-Optionen

Übergib Plugin-Optionen mit der Blocksyntax CSS nach dem Namen. Die Schlüssel entsprechen den Elementen des Plugin-Optionsarrays:

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

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

Das Plugin @tailwindcss/forms akzeptiert strategy (base oder class); @tailwindcss/typography akzeptiert className, um die generierte Klasse prose umzubenennen. Die vollständige Liste der Optionen findest du auf den Seiten der einzelnen Plugins.

Integrierte Plugins

Benutzerdefinierte Plugins

Schreibe ein eigenes Plugin, indem du PluginInterface implementierst und die Methoden von PluginAPI verwendest (addUtilities, matchUtilities, addComponents, addVariant, theme und weitere). Registriere es mit registerPlugin(new MyPlugin()), damit der von getName() zurückgegebene Name in einer @plugin "my-plugin"-Direktive aufgelöst wird:

use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

Weitere Informationen zur Schnittstelle, ein vollständiges Beispiel und die komplette Referenz der Methode PluginAPI findest du unter Benutzerdefinierte Plugins.