Direktyvos

Direktyvos yra įvesties CSS faile rašomos at-rule taisyklės su priešdėliu @, skirtos Tailwind išvesties komponavimui, išplėtimui ir tvarkos nustatymui. Šiame puslapyje aptariamos @apply, @utility, @variant, @custom-variant ir @layer. Apie @theme rašoma skiltyje Tema; apie @plugin – skiltyje Papildiniai; o apie @source – skiltyje @source.

@apply

@apply įterpia esamų paslaugų deklaracijas į jūsų parinkiklį. Naudokite ją, kad paslaugų stilius priskirtumėte semantinei klasei, taip pat įdėtuosiuose parinkikliuose ir medijos užklausose.

use TailwindPHP\tw;

$css = tw::generate('<div class="btn">', '
    @import "tailwindcss";

    @theme { --color-brand: #3b82f6; }

    .btn {
        @apply px-4 py-2 rounded-lg bg-brand text-white;
    }
');

Variantai veikia @apply sąraše: @apply bg-blue-500 hover:bg-blue-600; išplečia būseną :hover, o adaptyvūs priešdėliai, pavyzdžiui, @apply px-4 md:px-6 lg:px-8;, sukuria atitinkamas @media taisykles. Taip pat palaikomas svarbos modifikatorius (@apply !flex;). Įdėtieji parinkikliai taip pat palaikomi, todėl tokia taisyklė kaip .card { h2 { @apply text-xl font-bold; } } taiko paslaugas įdėtam h2.

@apply yra sakinys: @apply px-4 { … } su turiniu sukelia klaidą. @apply, kuriame nurodyti tik brūkšneliais atskirti identifikatoriai (@apply --my-mixin;), yra CSS maišiklis iš juodraščio CSS maišiklių, o ne paslaugų sąrašas, todėl TailwindPHP jo neatpažįsta; į tą patį @apply įtraukus maišiklį ir paslaugas, sukeliama klaida (You cannot use @apply with both mixins and utilities…). Šiuo metu maišiklių taisyklės išmetamos iš išvesties, o ne perduodamos toliau (#12).

@utility

@utility registruoja tinkintą paslaugą, kuri dalyvauja Tailwind variklio veikloje – ji surūšiuojama į sluoksnį utilities ir, kaip bet kuri integruotoji paslauga, priima variantus. Statinės paslaugos turinys yra nekintamas:

@utility content-auto {
    content-visibility: auto;
}

Kadangi tai tikra paslauga, variantai derinami automatiškai (hover:content-auto, md:content-auto). Pačiame turinyje gali būti naudojama @apply ir įdėtieji parinkikliai:

@utility btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
}

@utility card {
    color: red;
    &:hover { color: blue; }
}

Funkcinės paslaugos pavadinime naudojamas priesagas -*, o atitinkančiai reikšmei nuskaityti naudojama --value():

@theme {
    --gutter-wide: 3rem;
}

@utility gutter-* {
    padding-inline: --value(--gutter-*, [length]);
    padding-inline: --spacing(--value(integer));
}

--value() iš eilės nustato kandidato reikšmę pagal kiekvieną šaltinį: temos vardų sritį (--gutter-*), savavališką reikšmę su duomenų tipu ([length]) arba nurodytą reikšmės tipą (integer, number, percentage, ratio). Deklaracija, kurios --value() reikšmės nepavyksta nustatyti, pašalinama, todėl sudėjus deklaracijas gaunama atsarginių reikšmių seka:

--modifier() taip pat apdoroja dalį po / tokiu pačiu būdu: jei turinyje yra line-height: --modifier(integer);, gutter-4/7 taip pat išveda line-height: 7. Paslaugų pavadinimai atitinka TailwindCSS v4.3.3 taisykles: gali būti ne daugiau kaip vienas /, % leidžiamas tik pabaigoje po skaitmens, o taškai galimi tik tarp skaitmenų.

@variant

@variant pritaiko variantą deklaracijoms jūsų CSS viduje, neapibrėždama paslaugos:

.card {
    color: red;

    @variant hover {
        color: blue;
    }

    @variant dark {
        color: white;
    }
}

.card {
  color: red;
}
@media (hover: hover) {
  .card:hover {
    color: #00f;
  }
}
@media (prefers-color-scheme: dark) {
  .card {
    color: #fff;
  }
}

Variantus galima jungti (@variant hover:focus), vardyti atskiriant kableliais, dėti vieną į kitą ir nurodyti savo @custom-variant. Aukščiausio lygio @variant be turinio arba su @slot dėl atgalinio suderinamumo laikoma @custom-variant.

@custom-variant

@custom-variant apibrėžia naują variantą, kurį galite pridėti kaip priešdėlį prie bet kurios paslaugos. Glaustoje formoje nurodomas varianto pavadinimas, skliaustuose pateikiamas parinkiklis arba at-rule.

Parinkiklių sąrašo variante elemento vieta žymima &:

@custom-variant hocus (&:hover, &:focus);

hocus:bg-blue-500 išveda ir taisykles :hover, ir :focus. Atributo forma veikia taip pat:

@custom-variant loading (&[data-loading="true"]);

At-rule variantas apgaubia atitinkančias paslaugas ta at-rule taisykle:

@custom-variant tablet (@media (min-width: 600px));

Tinkinti variantai jungiami su integruotaisiais: sm:hocus:bg-blue-500 įdeda parinkiklį hocus į medijos užklausą sm. Sudėtingesniems atvejams naudokite bloko formą; @slot žymi vietą, kur įterpiamos paslaugos deklaracijos:

@custom-variant child {
    & > * {
        @slot;
    }
}

@custom-variant sidebar-open {
    .sidebar-open & {
        @slot;
    }
}

@layer

@layer valdo pakopų tvarką naudodama savąsias CSS pakopų sluoksnių funkcijas. Tuščias @layer sakinys deklaruoja sluoksnių tvarką; vėlesni sluoksniai turi pirmenybę nepriklausomai nuo parinkiklio specifiškumo. Kanoninė Tailwind tvarka:

@layer theme, base, components, utilities;

Būtent tai @import "tailwindcss" nustato viduje. Galite deklaruoti savo tvarką arba ją išskaidyti į kelis sakinius (pirmiausia @layer reset, base;, tada @layer components, utilities;), o taisykles priskirti įvardytam sluoksniui naudodami bloką:

use TailwindPHP\tw;

$css = tw::generate('<article><h1>Title</h1></article>', '
    @import "tailwindcss";

    @layer base {
        h1 { font-size: var(--text-2xl); }
        a  { color: var(--color-blue-600); text-decoration-line: underline; }
    }
');

Įtraukus pagrindinius stilius per @layer base, jie lieka žemiau components ir utilities, todėl paslaugos klasė visada perrašo numatytuosius elementų stilius. Tas pats taikoma @layer components { … } komponentų klasėms, kurios turi būti žemiau paslaugų. Apie anoniminius sluoksnius ir modifikatorius layer() ties @import rašoma skiltyje Importai.

Tolesni veiksmai

• Tema – @theme žetonai ir temos funkcijos.
• Importai – @import, virtualieji moduliai ir modifikatoriai layer().
• Papildiniai – direktyva @plugin ir papildinio API.
• @source – valdykite, kurie failai ir klasės nuskaitomi.