Direktīvas

Direktīvas ir @ prefiksētie at-rules noteikumi, ko rakstāt ievades CSS, lai apvienotu, paplašinātu un sakārtotu Tailwind izvadi. Šajā lapā aplūkoti @apply, @utility, @variant, @custom-variant un @layer. @theme ir aprakstīts sadaļā Motīvs; @plugin — sadaļā Spraudņi; bet @source — sadaļā @source.

@apply

@apply iekļauj esošo utilītu deklarācijas jūsu selektorā. Izmantojiet to, lai piesaistītu utilītu stilus semantiskai klasei, tostarp ligzdotos selektoros un multivides vaicājumos.

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

Varianti darbojas @apply sarakstā — @apply bg-blue-500 hover:bg-blue-600; izvērš :hover stāvokli, bet responsīvie prefiksi, piemēram, @apply px-4 md:px-6 lg:px-8;, ģenerē atbilstošos @media noteikumus. Tiek ievērots arī svarīguma modifikators (@apply !flex;). Tiek atbalstīti ligzdoti selektori, tāpēc tāds noteikums kā .card { h2 { @apply text-xl font-bold; } } piemēro utilītas ligzdotajam h2.

@apply ir priekšraksts: @apply px-4 { … } ar bloku izraisa kļūdu. @apply, kurā norādīti tikai defises saturoši identifikatori (@apply --my-mixin;), ir CSS jaukšanas funkcija no CSS mixins draft, nevis utilītu saraksts, tāpēc TailwindPHP to neatrisina; jaukšanas funkcijas un utilītu ievietošana vienā @apply izraisa kļūdu (You cannot use @apply with both mixins and utilities…). Pašlaik jaukšanas funkciju noteikumi tiek atmesti, nevis nodoti tālāk (#12).

@utility

@utility reģistrē pielāgotu utilītu, kas darbojas Tailwind dzinējā — tā tiek sakārtota utilities slānī un pieņem variantus tāpat kā iebūvētās utilītas. Statiskai utilītai ir fiksēts bloks:

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

Tā kā tā ir īsta utilīta, varianti tiek kombinēti automātiski (hover:content-auto, md:content-auto). Blokā var izmantot arī @apply un ligzdotus selektorus:

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

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

Funkcionālās utilītas nosaukumā izmanto sufiksu -* un nolasa atbilstošo vērtību ar --value():

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

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

--value() secīgi pārbauda kandidāta vērtību katrā avotā: motīva nosaukumvietā (--gutter-*), patvaļīgā vērtībā ar datu tipu ([length]) vai vienkāršā vērtības tipā (integer, number, percentage, ratio). Ja deklarācijas --value() netiek atrisināts, tā tiek atmesta, tāpēc, sakraujot deklarācijas, var izveidot rezerves vērtību ķēdi:

--modifier() atrisina daļu pēc / tāpat: ja blokā ir line-height: --modifier(integer);, gutter-4/7 ģenerē arī line-height: 7. Utilītu nosaukumos tiek ievēroti TailwindCSS v4.3.3 noteikumi: ne vairāk kā viens /, % tikai beigās pēc cipara, bet punkti tikai starp cipariem.

@variant

@variant piemēro variantu deklarācijām jūsu CSS, nedefinējot utilītu:

.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 var sakraut (@variant hover:focus), norādīt ar komatiem, ievietot citu citā, kā arī nosaukt savus @custom-variant. Augstākā līmeņa @variant bez bloka vai ar @slot atpakaļsaderības nolūkos tiek uzskatīts par @custom-variant.

@custom-variant

@custom-variant definē jaunu variantu, ko var pievienot kā prefiksu jebkurai utilītai. Kompaktajā formā norāda varianta nosaukumu un selektoru vai at-rule iekavās.

Selektoru saraksta variants izmanto & elementa apzīmēšanai:

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

hocus:bg-blue-500 pēc tam ģenerē gan :hover, gan :focus noteikumus. Atribūta forma darbojas tāpat:

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

At-rule variants ietver atbilstošās utilītas šajā at-rule:

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

Pielāgotos variantus var kombinēt ar iebūvētajiem — sm:hocus:bg-blue-500 ievieto selektoru hocus multivides vaicājumā sm. Sarežģītākiem gadījumiem izmantojiet bloka formu, kurā @slot norāda, kur tiek ievietotas utilītas deklarācijas:

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

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

@layer

@layer kontrolē kaskādes secību, izmantojot vietējos CSS kaskādes slāņus. Vienkāršs @layer priekšraksts deklarē slāņu secību; vēlākie slāņi ir prioritāri neatkarīgi no selektora specifiskuma. Tailwind kanoniskā secība ir šāda:

@layer theme, base, components, utilities;

Tieši to @import "tailwindcss" iestata iekšēji. Varat deklarēt savu secību vai sadalīt to vairākos priekšrakstos (@layer reset, base;, pēc tam @layer components, utilities;), kā arī piešķirt noteikumus nosauktam slānim, izmantojot bloku:

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

Pievienojot pamata stilus ar @layer base, tie paliek zem components un utilities, tāpēc utilītas klase vienmēr pārraksta elementa noklusējuma stilus. Tas pats attiecas uz @layer components { … } komponentu klasēm, kurām jāatrodas zem utilītām. Anonīmi slāņi un @import modifikatori uz layer() ir aplūkoti sadaļā Imports.

Nākamās darbības

• Motīvs — @theme tokeni un motīva funkcijas.
• Importi — @import, virtuālie moduļi un layer() modifikatori.
• Spraudņi — direktīva @plugin un spraudņa API.
• @source — nosaka, kuriem failiem tiek meklētas klases.