Ugrás a tartalomhoz

Bővítmények

Megtekintés Markdownként Szerkesztés itt: GitHub Dokumentáció itt: 3843abd

A TailwindPHP a hivatalos TailwindCSS bővítmények PHP átvételét biztosítja, és natív PHP bővítmény-API felületet tesz elérhetővé. A bővítmények segédosztályokat, komponenseket és változatokat regisztrálnak; a bemeneti CSS fájlban szereplő @plugin direktívával tölthetők be. A beépített bővítmények az JavaScript megfelelőinek 1:1 arányú átvételei — ugyanazokkal a szelektorokkal és kimenettel —, de PHP-ban vannak megvalósítva, és nem Node-on keresztül futnak. Jelenleg egy kivétel van: a tipográfiai bővítmény elemmódosítói (prose-headings:, prose-a:, …) bővítményváltozatokra támaszkodnak, amelyek még nem alkalmazódnak (#10).

A @plugin használata

A bővítmény nevére az @plugin használatával hivatkozhat. A beépített bővítmények a saját npm csomagnevüket használják. Párosítsa a direktívát az @import "tailwindcss/utilities.css";-szal, hogy a bővítmény osztályai a segédosztályok rétegébe kerüljenek:

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

Több bővítmény együtt is betölthető, a sorrendjük nem számít:

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

A @plugin nem ágyazható be másik at-szabályba (például @media-be), a nem regisztrált bővítménynév pedig hibát okoz.

Bővítménybeállítások

A bővítmény beállításait az CSS blokk szintaxisával adhatja meg a név után. A kulcsok a bővítmény beállításait tartalmazó tömb elemeinek felelnek meg:

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

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

A @tailwindcss/forms bővítmény a strategy értéket fogadja el (base vagy class); a @tailwindcss/typography a className értéket fogadja el a létrehozott prose osztály átnevezéséhez. A teljes beállításlistát az egyes bővítmények oldalain találja.

Beépített bővítmények

Bővítmény Leírás
@tailwindcss/typography Az prose osztályok — gazdag szövegekhez való tipográfiai alapstílusok. Lásd a Tipográfia oldalt.
@tailwindcss/forms Alaphelyzetbe állítható, formázható űrlapvezérlők. Lásd az Űrlapok oldalt.

Egyéni bővítmények

Saját bővítmény írásához valósítsa meg a PluginInterface felületet, és használja a PluginAPI metódusait (addUtilities, matchUtilities, addComponents, addVariant, theme és még sok más). Regisztrálja a registerPlugin(new MyPlugin()) segítségével, hogy az getName() által visszaadott név feloldható legyen egy @plugin "my-plugin" direktívában:

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

Az interfészről, a teljes példáról és az PluginAPI metódus teljes leírásáról lásd az Egyéni bővítmények oldalt.