Przejdź do treści

Wtyczki

TailwindPHP zawiera porty PHP oficjalnych wtyczek TailwindCSS i udostępnia natywne PHP API wtyczek API. Wtyczki rejestrują narzędzia, komponenty i warianty; są ładowane za pomocą dyrektywy @plugin w wejściowym CSS. Wbudowane wtyczki to porty 1:1 ich odpowiedników JavaScript — te same selektory i wynik — zaimplementowane w PHP, a nie uruchamiane przez Node. Obecnie jest jeden wyjątek: modyfikatory elementów wtyczki typografii (prose-headings:, prose-a:, …) korzystają z wariantów wtyczek, które nie są jeszcze stosowane (#10).

Używanie @plugin

Odwołaj się do wtyczki po nazwie za pomocą @plugin. Wbudowane wtyczki używają nazwy pakietu npm. Połącz dyrektywę z @import "tailwindcss/utilities.css";, aby klasy wtyczki zostały dodane do warstwy 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";
    ',
]);

Można ładować wiele wtyczek naraz, a kolejność nie ma znaczenia:

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

@plugin nie można zagnieżdżać w innej regule at-rule (takiej jak @media); nieznana nazwa wtyczki powoduje błąd.

Opcje wtyczek

Przekaż opcje wtyczce za pomocą składni bloku CSS po nazwie. Klucze odpowiadają tablicy opcji wtyczki:

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

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

Wtyczka @tailwindcss/forms przyjmuje strategy (base lub class); @tailwindcss/typography przyjmuje className, aby zmienić nazwę generowanej klasy prose. Pełną listę opcji znajdziesz na stronach poszczególnych wtyczek.

Wbudowane wtyczki

Wtyczka Opis
@tailwindcss/typography Klasy prose — domyślne style typograficzne dla tekstu sformatowanego. Zobacz Typografię.
@tailwindcss/forms Resetowalne, konfigurowalne kontrolki formularzy. Zobacz Formularze.

Własne wtyczki

Napisz własną wtyczkę, implementując PluginInterface i używając metod z PluginAPI (addUtilities, matchUtilities, addComponents, addVariant, theme i innych). Zarejestruj ją za pomocą registerPlugin(new MyPlugin()), aby nazwa zwracana przez getName() była rozpoznawana w dyrektywie @plugin "my-plugin":

PHP
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

Zobacz Własne wtyczki, aby poznać interfejs, pełny przykład i kompletny opis metod PluginAPI.