Direktiivid

Direktiivid on sisend-CSS-isse kirjutatavad, @-ga algavad at-reeglid, mille abil koostate, laiendate ja järjestate Tailwind väljundit. See leht käsitleb direktiive @apply, @utility, @variant, @custom-variant ja @layer. @theme käsitletakse lehel Teema, @plugin lehel Pluginad ning @source lehel @source.

@apply

@apply lisab olemasolevate utiliitide deklaratsioonid teie enda selektorisse. Nii saate siduda utiliidistiilid semantilise klassiga, sealhulgas pesastatud selektorites ja meediapäringutes.

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

Variandid toimivad loendis @apply — @apply bg-blue-500 hover:bg-blue-600; laiendab oleku :hover ja kohanduvad eesliited, näiteks @apply px-4 md:px-6 lg:px-8;, väljastavad vastavad @media reeglid. Arvestatakse ka tähtsusmuutjat (@apply !flex;). Toetatud on pesastatud selektorid, seega rakendab näiteks reegel .card { h2 { @apply text-xl font-bold; } } utiliite pesastatud h2-ele.

@apply on lause: @apply px-4 { … } koos kehaga põhjustab vea. @apply, mis sisaldab ainult sidekriipsuga identifikaatoreid (@apply --my-mixin;), on CSS mixin mustandist CSS mixins draft], mitte utiliitide loend, mistõttu TailwindPHP seda ei lahenda; mixini ja utiliitide paigutamine samasse @apply-i põhjustab vea (You cannot use @apply with both mixins and utilities…). Mixin-reeglid jäetakse praegu väljundist välja, mitte ei edastata edasi (#12).

@utility

@utility registreerib kohandatud utiliidi, mis osaleb Tailwind mootoris — paigutub kihti utilities ja aktsepteerib variante nagu sisseehitatud utiliidid. Staatilisel utiliidil on fikseeritud sisu:

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

Kuna tegu on päris utiliidiga, kombineeruvad variandid automaatselt (hover:content-auto, md:content-auto). Sisu võib ise kasutada @apply ja pesastatud selektoreid:

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

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

Funktsionaalse utiliidi nimi lõpeb järelliitega -* ning sobitatud väärtuse saab kätte käsuga --value():

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

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

--value() lahendab kandidaadi väärtuse järjest iga allika alusel: teema nimeruumi (--gutter-*), andmetüübiga suvalise väärtuse ([length]) või lihtväärtuse tüübi (integer, number, percentage, ratio). Deklaratsioon, mille --value() ei lahene, jäetakse välja, nii et deklaratsioonide lisamine moodustab varuahelа:

--modifier() lahendab / järel oleva osa samamoodi: kui sisu sisaldab line-height: --modifier(integer);, väljastab ka gutter-4/7 väärtuse line-height: 7. Utiliitide nimed järgivad TailwindCSS v4.3.3 reegleid: maksimaalselt üks /, % ainult lõpus pärast numbrit ning punktid ainult numbrite vahel.

@variant

@variant rakendab variandi sinu enda CSS sees olevatele deklaratsioonidele ilma utiliiti määratlemata:

.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;
  }
}

Variante saab aheldada (@variant hover:focus), komadega loetleda, üksteise sisse pesastada ja nimetada enda @custom-variant-eid. Ülemise taseme @variant ilma sisuta või @slot-ga käsitletakse tagasiühilduvuse huvides kui @custom-variant.

@custom-variant

@custom-variant määratleb uue variandi, mille saad lisada mis tahes utiliidi ette. Lühivorm nimetab variandi ning annab sulgudes valija või at-reegli.

Valijate loendi variant kasutab elemendi tähistamiseks &:

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

hocus:bg-blue-500 väljastab seejärel nii reegli :hover kui ka reegli :focus. Atribuudivorm toimib samamoodi:

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

At-reegli variant ümbritseb sobitatud utiliidid selle at-reegliga:

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

Kohandatud variante saab kombineerida sisseehitatud variantidega — sm:hocus:bg-blue-500 pesastab valija hocus meediapäringu sm sisse. Keerukamate juhtude jaoks kasuta plokivormi, kus @slot märgib koha, kuhu utiliidi deklaratsioonid lisatakse:

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

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

@layer

@layer juhib kaskaadi järjekorda, kasutades natiivseid CSS kaskadikihte. Ilma plokita @layer lause määrab kihtide järjekorra; hilisemad kihid võidavad valija spetsiifilisusest olenemata. Tailwind kanooniline järjekord on järgmine:

@layer theme, base, components, utilities;

Täpselt nii seab @import "tailwindcss" selle sisemiselt paika. Võid määrata ise järjekorra või jagada selle mitme lause vahel (esmalt @layer reset, base;, seejärel @layer components, utilities;) ning määrata reeglid nimega kihile ploki abil:

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

Baastiilide lisamine @layer base kaudu hoiab need allpool components ja utilities, nii et utiliidiklass alistab alati elemendi vaikestiilid. Sama kehtib @layer components { … } kohta, mida kasutatakse utiliitide alla jäävate komponendiklasside jaoks. Anonüümseid kihte ja @import-i layer()-modifikaatoreid käsitleb Imports.

Järgmised sammud

• Theme — @theme tokenid ja teema funktsioonid.
• Imports — @import, virtuaalmoodulid ja layer()-modifikaatorid.
• Plugins — @plugin-direktiiv ja plugina API.
• @source — määra, milliseid faile ja klasse skannitakse.