Treci la conținut

Pluginuri

Vizualizați ca Markdown Editați pe GitHub Documentație la 3843abd

TailwindPHP include PHP versiuni ale pluginurilor oficiale TailwindCSS și oferă un API nativ pentru pluginuri PHPAPI. Pluginurile înregistrează utilitare, componente și variante; acestea sunt încărcate cu directiva @plugin din fișierul de intrare CSS. Pluginurile integrate sunt versiuni 1:1 ale variantelor lor JavaScript — aceiași selectori și același rezultat — implementate în PHP, nu executate prin Node. O excepție deocamdată: modificatorii de element ai pluginului de tipografie (prose-headings:, prose-a:, …) depind de variantele pluginului, care încă nu sunt aplicate (#10).

Utilizarea @plugin

Faceți referire la un plugin după nume cu @plugin. Pluginurile integrate folosesc numele pachetului lor npm. Asociați directiva cu @import "tailwindcss/utilities.css"; pentru ca clasele pluginului să fie emise în stratul de utilitare:

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

Puteți încărca mai multe pluginuri împreună, iar ordinea nu contează:

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

@plugin nu poate fi imbricată în altă regulă at (cum ar fi @media), iar un nume de plugin neînregistrat provoacă o eroare.

Opțiuni pentru pluginuri

Transmiteți opțiuni unui plugin folosind sintaxa blocului CSS după nume. Cheile corespund tabloului de opțiuni al pluginului:

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

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

Pluginul @tailwindcss/forms acceptă strategy (base sau class); @tailwindcss/typography acceptă className pentru redenumirea clasei prose generate. Consultați paginile fiecărui plugin pentru lista completă de opțiuni.

Pluginuri integrate

Plugin Descriere
@tailwindcss/typography Clasele prose — valori tipografice implicite pentru textul îmbogățit. Consultați Tipografie.
@tailwindcss/forms Controale de formular resetabile și stilizabile. Consultați Formulare.

Pluginuri personalizate

Scrieți propriul plugin implementând PluginInterface și folosind metodele din PluginAPI (addUtilities, matchUtilities, addComponents, addVariant, theme și altele). Înregistrați-l cu registerPlugin(new MyPlugin()), astfel încât numele returnat de getName() să fie rezolvat într-o directivă @plugin "my-plugin":

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

Consultați Pluginuri personalizate pentru interfață, un exemplu complet și referința completă a metodelor PluginAPI.