Ga naar de inhoud

Plugins

TailwindPHP bevat PHP-ports van de officiële plugins TailwindCSS en biedt een native plugin-PHP API. Plugins registreren utilities, componenten en varianten; je laadt ze met de directive @plugin in je invoer-CSS. De ingebouwde plugins zijn 1:1-ports van hun JavaScript-tegenhangers — dezelfde selectors en uitvoer — geïmplementeerd in PHP in plaats van uitgevoerd via Node. Eén uitzondering op dit moment: de elementmodifiers van de typografieplugin (prose-headings:, prose-a:, …) zijn afhankelijk van pluginvarianten, die nog niet worden toegepast (#10).

@plugin gebruiken

Verwijs naar een plugin op naam met @plugin. Ingebouwde plugins gebruiken hun npm-pakketnaam. Combineer de directive met @import "tailwindcss/utilities.css";, zodat de klassen van de plugin in de utilitieslaag worden opgenomen:

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

Je kunt meerdere plugins tegelijk laden; de volgorde maakt niet uit:

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

@plugin kan niet in een andere at-rule worden genest (zoals @media); een niet-geregistreerde pluginnaam geeft een fout.

Pluginopties

Geef opties door aan een plugin met de bloksyntaxis CSS na de naam. De sleutels komen overeen met de optiearray van de plugin:

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

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

De plugin @tailwindcss/forms accepteert strategy (base of class); @tailwindcss/typography accepteert className om de gegenereerde klasse prose een andere naam te geven. Zie de pagina's van afzonderlijke plugins voor de volledige lijst met opties.

Ingebouwde plugins

Plugin Beschrijving
@tailwindcss/typography De klassen prose — typografische standaardstijlen voor rijke tekst. Zie Typografie.
@tailwindcss/forms Resetbare, stijlbare formulierbesturingselementen. Zie Formulieren.

Aangepaste plugins

Schrijf je eigen plugin door PluginInterface te implementeren en methoden van PluginAPI te gebruiken (addUtilities, matchUtilities, addComponents, addVariant, theme en meer). Registreer de plugin met registerPlugin(new MyPlugin()), zodat de door getName() geretourneerde naam wordt herkend in een @plugin "my-plugin"-directive:

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

Zie Aangepaste plugins voor de interface, een volledig voorbeeld en de complete methodebeschrijving van PluginAPI.