Liigu sisu juurde

Kohandatud pluginad

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 3843abd

Kohandatud plugin on PHP klass, mis rakendab TailwindPHP\Plugin\PluginInterface. See saab PluginAPI eksemplari ja kasutab seda staatiliste ning funktsionaalsete utiliitide, komponentide ja variantide registreerimiseks. Kui plugin on registreeritud käsuga registerPlugin(), leiab @plugin direktiiv selle nime järgi üles — sama mehhanismi kasutavad sisseehitatud tüpograafia- ja vormipluginad.

PluginInterface

Rakendage kolm meetodit:

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() tagastab identifikaatori, mida kasutatakse @plugin "..."-s.
  • __invoke() käivitab plugina ja registreerib kõik $api kaudu. Massiiv $options sisaldab väärtusi ploki @plugin CSS kaudu.
  • getThemeExtensions() tagastab teemaruumnimed, mis liidetakse enne utiliitide genereerimist (kui neid pole, tagastage []).

Näide

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 viide

API peegeldab TailwindCSS plugina API-t:

Meetod Signatuur Eesmärk
addBase addBase(array $css): void Lisab baaskihi stiilid.
addUtilities addUtilities(array $utilities, array $options = []): void Registreerib selektoriga seotud staatilised utiliidiklassid.
matchUtilities matchUtilities(array $utilities, array $options = []): void Registreerib funktsionaalsed utiliidid; $options['values'] annab väärtuste kaardi, $options['supportsNegativeValues'] lubab negatiivsed väärtused.
addComponents addComponents(array $components, array $options = []): void Registreerib komponendiklassid (komponentide kiht).
matchComponents matchComponents(array $components, array $options = []): void Registreerib väärtuste kaardiga funktsionaalsed komponendid.
addVariant addVariant(string $name, string|array $variant): void Registreerib selektorist staatilise variandi.
matchVariant matchVariant(string $name, callable $callback, array $options = []): void Registreerib funktsionaalse variandi; $options['values'] annab väärtuste kaardi.
theme theme(string $path, mixed $defaultValue = null): mixed Loeb teemaväärtuse punktidega eraldatud tee järgi (e.g. colors.blue.500).
config config(?string $path = null, mixed $defaultValue = null): mixed Loeb konfiguratsiooniväärtuse punktidega eraldatud tee järgi või kogu konfiguratsiooni, kui $path on null.
prefix prefix(string $className): string Rakendab klassinimele seadistatud prefiksi.

Tagasiheitele matchUtilities, matchComponents ja matchVariant antakse väärtus ning teise argumendina massiiv, mis sisaldab võtit modifier.

Valige utiliitide nimed, mida põhituum Tailwind juba ei kasuta. Kui plugina utiliidil on sama nimi kui põhituuma utiliidil (näiteks tab-*, mida põhituum Tailwind kasutab väärtuse tab-size jaoks alates versioonist v4.3), satuvad mõlemad deklaratsioonid samasse reeglisse ja põhituuma oma tuleb viimasena, seega jääb peale: plugina tab-4 vastendamine väärtusele 7 annab ikka tulemuseks tab-size: 4.

Teadaolev probleem: addVariant() abil registreeritud variandid ja matchVariant() registreeritavad väärtuspõhised variandid ei rakendu praeguses versioonis. Ülaltoodud näite hocus:flex kompileeritakse kujule .hocus\:flex { display: flex; } ilma :hover/:focus selektorita (#10). Kuni see pole parandatud, määratlege variant failis CSS, kasutades @custom-variant; see toimib: @custom-variant hocus (&:hover, &:focus);.

Registreerimine ja kasutamine

Registreerige plugina eksemplar ja viidake sellele seejärel getName() nimest:

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

Vaadake lehelt Pluginad teavet direktiivi @plugin kohta ja lehelt Teema väärtuste kohta, mida $api->theme() kaudu kasutatakse.