Direktive

Direktive so pravila at s predpono @, ki jih zapišete v vhodno datoteko CSS za sestavljanje, razširjanje in določanje vrstnega reda izhoda Tailwind. Ta stran obravnava @apply, @utility, @variant, @custom-variant in @layer. @theme je obravnavan v razdelku Tema; @plugin v razdelku Vtičniki; @source pa v razdelku @source.

@apply

@apply vstavi deklaracije obstoječih pripomočkov v vaš izbirnik. Uporabite ga za dodajanje slogov pripomočkov semantičnemu razredu, tudi znotraj vgnezdenih izbirnikov in medijskih poizvedb.

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

Različice delujejo v seznamu @apply — @apply bg-blue-500 hover:bg-blue-600; razširi stanje :hover, odzivne predpone, kot je @apply px-4 md:px-6 lg:px-8;, pa ustvarijo ustrezna pravila @media. Upošteva se tudi modifikator za pomembnost (@apply !flex;). Podprti so vgnezdeni izbirniki, zato pravilo, kot je .card { h2 { @apply text-xl font-bold; } }, uporabi pripomočke za vgnezdeni h2.

@apply je stavek: @apply px-4 { … } z vsebino sproži napako. @apply, ki navaja samo črtice in identifikatorje (@apply --my-mixin;), je mešanica iz osnutka CSS miksinov v CSS, ne pa seznam pripomočkov, zato ga TailwindPHP ne razreši; če mešanico in pripomočke navedete v istem @apply, se sproži napaka (You cannot use @apply with both mixins and utilities…). Pravila mešanic se v trenutni izdaji iz izhoda izpustijo, namesto da bi se posredovala naprej (#12).

@utility

@utility registrira pripomoček po meri, ki sodeluje z mehanizmom Tailwind — razvrsti se v plast utilities in sprejema različice tako kot vgrajeni pripomočki. Statični pripomoček ima nespremenljivo telo:

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

Ker gre za pravi pripomoček, se različice samodejno sestavljajo (hover:content-auto, md:content-auto). Telo lahko uporablja tudi @apply in vgnezdene izbirnike:

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

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

Funkcionalni pripomoček ima v imenu pripono -* in prebere ujemajočo se vrednost z --value():

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

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

--value() razreši vrednost kandidata glede na vsak vir po vrsti: imenski prostor teme (--gutter-*), poljubna vrednost s podatkovnim tipom ([length]) ali samostojni tip vrednosti (integer, number, percentage, ratio). Deklaracija, katere --value() ni mogoče razrešiti, se izpusti, zato zaporedje deklaracij ustvari nadomestno verigo:

--modifier() razreši del za / na enak način: če telo vsebuje line-height: --modifier(integer);, tudi gutter-4/7 ustvari line-height: 7. Imena pripomočkov upoštevajo pravila TailwindCSS v4.3.3: največ en /, % samo na koncu za števko, pike pa samo med števkami.

@variant

@variant uporabi različico za deklaracije znotraj lastnega CSS, ne da bi določil pripomoček:

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

Različice je mogoče nalagati v niz (@variant hover:focus), navajati z vejicami, vgnezditi eno v drugo in z njimi poimenovati lastne @custom-variant. @variant na vrhnji ravni brez telesa ali z @slot se zaradi združljivosti s starejšimi različicami obravnava kot @custom-variant.

@custom-variant

@custom-variant določi novo različico, ki jo lahko dodate kot predpono kateremu koli pripomočku. Jedrnata oblika poimenuje različico in v oklepaju določi izbirnik ali pravilo at.

Različica s seznamom izbirnikov uporabi & za element:

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

hocus:bg-blue-500 nato ustvari pravili :hover in :focus. Enako deluje tudi oblika atributa:

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

Različica s pravilom at ovije ujemajoče se pripomočke v to pravilo at:

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

Različice po meri se združujejo z vgrajenimi — sm:hocus:bg-blue-500 vgnezdi izbirnik hocus znotraj medijske poizvedbe sm. Za zahtevnejše primere uporabite obliko z blokom, v kateri @slot označuje mesto za vstavljanje deklaracij pripomočka:

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

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

@layer

@layer nadzira vrstni red kaskade z izvornimi plastmi kaskade CSS. Samostojni stavek @layer določi vrstni red plasti; poznejše plasti imajo prednost ne glede na specifičnost izbirnika. Kanonični vrstni red za Tailwind je:

@layer theme, base, components, utilities;

Prav to @import "tailwindcss" nastavi interno. Vrstni red lahko določite sami ali ga razdelite med več stavkov (najprej @layer reset, base;, nato @layer components, utilities;) in pravila dodelite poimenovani plasti z blokom:

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

Dodajanje osnovnih slogov z @layer base jih ohrani pod components in utilities, zato razred pripomočka vedno prepiše privzete sloge elementa. Enako velja za @layer components { … } pri razredih komponent, ki morajo biti pod pripomočki. Anonimne plasti in modifikatorji layer() v @import so obravnavani v razdelku Uvozi.

Naslednji koraki

• Tema — žetoni @theme in funkcije teme.
• Uvozi — @import, navidezni moduli in modifikatorji layer().
• Vtičniki — direktiva @plugin in API vtičnika.
• @source — nadzor nad datotekami in razredi, ki se pregledujejo.