Pereiti prie turinio

Pasirinktiniai papildiniai

Peržiūrėti kaip Markdown Redaguoti per GitHub Dokumentacija: 3843abd

Pasirinktinis papildinys yra PHP klasė, įgyvendinanti TailwindPHP\Plugin\PluginInterface. Ji gauna PluginAPI egzempliorių ir jį naudoja statinėms bei funkcinėms utilitoms, komponentams ir variantams registruoti. Užregistruotas per registerPlugin(), papildinys pagal pavadinimą pasiekiamas @plugin direktyvoje — taip veikia ir įtaisytieji tipografijos bei formų papildiniai.

PluginInterface

Įgyvendinkite tris metodus:

PHP
namespace TailwindPHP\Plugin;

interface PluginInterface
{
    public function getName(): string;
    public function __invoke(PluginAPI $api, array $options = []): void;
    public function getThemeExtensions(array $options = []): array;
}
  • getName() grąžina identifikatorių, naudojamą @plugin "...".
  • __invoke() vykdo papildinį ir registruoja visus elementus per $api. Masyve $options pateikiamos reikšmės iš bloko @plugin CSS.
  • getThemeExtensions() grąžina temų vardų sritis, kurias reikia sujungti prieš generuojant utilitas (jei jų nėra, grąžinkite []).

Pavyzdys

PHP
use TailwindPHP\Plugin\PluginInterface;
use TailwindPHP\Plugin\PluginAPI;

class MyCustomPlugin implements PluginInterface
{
    public function getName(): string
    {
        return 'my-custom-plugin';
    }

    public function __invoke(PluginAPI $api, array $options = []): void
    {
        // Static utilities
        $api->addUtilities([
            '.btn' => [
                'padding' => '0.5rem 1rem',
                'border-radius' => '0.25rem',
                'font-weight' => '600',
            ],
            '.btn-primary' => [
                'background-color' => 'blue',
                'color' => 'white',
            ],
        ]);

        // Functional utilities (generates .gutter-sm, .gutter-md, .gutter-lg)
        $api->matchUtilities(
            [
                'gutter' => fn ($value) => ['padding-inline' => $value],
            ],
            ['values' => ['sm' => '1rem', 'md' => '2rem', 'lg' => '3rem']]
        );

        // Component classes (sorted into the components layer)
        $api->addComponents([
            '.card' => [
                'background-color' => 'white',
                'border-radius' => '0.5rem',
                'padding' => '1rem',
            ],
        ]);

        // Custom variant (see the note below the API reference)
        $api->addVariant('hocus', '&:hover, &:focus');

        // Read a theme value
        $primary = $api->theme('colors.blue.500', '#3b82f6');
    }

    public function getThemeExtensions(array $options = []): array
    {
        return []; // Return theme additions if needed
    }
}

PluginAPI nuoroda

API atitinka TailwindCSS papildinio API:

Metodas Signatūra Paskirtis
addBase addBase(array $css): void Pridėti bazinio sluoksnio stilius.
addUtilities addUtilities(array $utilities, array $options = []): void Registruoti statines utilitų klases pagal selektorių.
matchUtilities matchUtilities(array $utilities, array $options = []): void Registruoti funkcines utilitas; $options['values'] pateikia reikšmių žemėlapį, $options['supportsNegativeValues'] įjungia neigiamas reikšmes.
addComponents addComponents(array $components, array $options = []): void Registruoti komponentų klases (komponentų sluoksnis).
matchComponents matchComponents(array $components, array $options = []): void Registruoti funkcinius komponentus su reikšmių žemėlapiu.
addVariant addVariant(string $name, string|array $variant): void Registruoti statinį variantą pagal selektorių.
matchVariant matchVariant(string $name, callable $callback, array $options = []): void Registruoti funkcinį variantą; $options['values'] pateikia reikšmių žemėlapį.
theme theme(string $path, mixed $defaultValue = null): mixed Skaityti temos reikšmę pagal taškais atskirtą kelią (e.g. colors.blue.500).
config config(?string $path = null, mixed $defaultValue = null): mixed Skaityti konfigūracijos reikšmę pagal taškais atskirtą kelią arba visą konfigūraciją, kai $path yra null.
prefix prefix(string $className): string Pridėti sukonfigūruotą prefiksą prie klasės pavadinimo.

matchUtilities, matchComponents ir matchVariant perduotai funkcijai pateikiama reikšmė ir antrasis argumentas — masyvas su modifier raktu.

Pasirinkite utilitų pavadinimus, kurių pagrindinis Tailwind dar nenaudoja. Jei papildinio utilita turi tokį pat pavadinimą kaip pagrindinė (pavyzdžiui, tab-*, kurį pagrindinis Tailwind naudoja tab-size nuo v4.3), abi deklaracijos patenka į tą pačią taisyklę, o pagrindinė eina paskutinė ir laimi: net jei papildinio tab-4 susietas su 7, vis tiek gaunamas tab-size: 4.

Žinoma problema: variantai, užregistruoti naudojant addVariant(), ir kiekvienos reikšmės variantai, kuriuos registruoja matchVariant(), dabartinėje versijoje netaikomi. hocus:flex iš pirmiau pateikto pavyzdžio kompiliuojamas į .hocus\:flex { display: flex; } be :hover/:focus parinkiklio (#10). Kol tai bus pataisyta, apibrėžkite variantą faile CSS naudodami @custom-variant – tai veikia: @custom-variant hocus (&:hover, &:focus);.

Registravimas ir naudojimas

Užregistruokite papildinio egzempliorių, tada nurodykite jį vardu iš getName():

PHP
use TailwindPHP\tw;
use function TailwindPHP\registerPlugin;

registerPlugin(new MyCustomPlugin());

$css = tw::generate(
    '<div class="btn btn-primary card gutter-md">…</div>',
    '@plugin "my-custom-plugin"; @import "tailwindcss/utilities.css";'
);

Žr. Papildiniai, kur aprašyta @plugin direktyva, ir Tema, kur pateiktos per $api->theme() atskleidžiamos reikšmės.