Direktiver

Direktiver er at-rules med præfikset @, som du skriver i din input-CSS for at sammensætte, udvide og ordne Tailwinds output. Denne side gennemgår @apply, @utility, @variant, @custom-variant og @layer. @theme gennemgås under Theme; @plugin under Plugins; og @source under @source.

@apply

@apply indsætter deklarationerne fra eksisterende utilities i din egen selektor. Brug det til at knytte utility-typografier til en semantisk klasse, også i indlejrede selektorer og media queries.

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

Varianter fungerer i en @apply-liste — @apply bg-blue-500 hover:bg-blue-600; udvider til tilstanden :hover, og responsive præfikser som @apply px-4 md:px-6 lg:px-8; genererer de tilsvarende @media-regler. Den vigtige modifikator understøttes også (@apply !flex;). Indlejrede selektorer understøttes, så en regel som .card { h2 { @apply text-xl font-bold; } } anvender utilities på den indlejrede h2.

@apply er en erklæring: @apply px-4 { … } med en blok udløser en fejl. En @apply, der kun indeholder bindestregs-id'er (@apply --my-mixin;), er en CSS-mixin fra udkastet til CSS mixins, ikke en utility-liste, så TailwindPHP kan ikke finde den. Hvis en mixin og utilities placeres i samme @apply, udløses en fejl (You cannot use @apply with both mixins and utilities…). Mixin-regler udelades i øjeblikket fra outputtet i stedet for at blive sendt videre (#12).

@utility

@utility registrerer en brugerdefineret utility, der deltager i Tailwinds motor — den sorteres i laget utilities og accepterer varianter som indbyggede utilities. En statisk utility har en fast blok:

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

Da den er en egentlig utility, kombineres varianter automatisk (hover:content-auto, md:content-auto). Selve blokken kan bruge @apply og indlejrede selektorer:

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

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

En funktionel utility bruger et suffiks -* i navnet og læser den matchende værdi med --value():

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

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

--value() afprøver kandidatens værdi mod hver kilde på skift: et tema-navnerum (--gutter-*), en vilkårlig værdi med en datatype ([length]) eller en bar værditype (integer, number, percentage, ratio). En deklaration, hvis --value() ikke kan findes, udelades, så flere deklarationer i rækkefølge danner en reservekæde:

--modifier() finder også delen efter en / på samme måde: med line-height: --modifier(integer); i blokken genererer gutter-4/7 også line-height: 7. Utility-navne følger reglerne for TailwindCSS v4.3.3: højst én /, % kun til sidst efter et ciffer og punktummer kun mellem cifre.

@variant

@variant anvender en variant på deklarationer i din egen CSS uden at definere en utility:

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

Varianter kan stables (@variant hover:focus), angives med kommaer og indlejres i hinanden, og de kan navngive dine egne @custom-variant-elementer. En @variant på øverste niveau uden en blok eller med @slot behandles som @custom-variant af hensyn til bagudkompatibilitet.

@custom-variant

@custom-variant definerer en ny variant, som du kan sætte foran enhver utility. Den korte form angiver variantens navn og en selektor eller at-rule i parenteser.

En variant med en selektorliste bruger & som element:

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

hocus:bg-blue-500 genererer derefter både reglerne :hover og :focus. En attributform fungerer på samme måde:

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

En at-rule-variant omslutter de matchede utilities med den pågældende at-rule:

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

Brugerdefinerede varianter kan stables med indbyggede varianter — sm:hocus:bg-blue-500 indlejrer selektoren hocus i media query'en sm. Til mere avancerede tilfælde kan du bruge blokformen, hvor @slot markerer, hvor utility-deklarationerne indsættes:

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

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

@layer

@layer styrer rækkefølgen i kaskaden ved hjælp af de indbyggede CSS-kaskadelag. En @layer-erklæring uden blok angiver lagenes rækkefølge; senere lag vinder uanset selektorspecificitet. Den kanoniske rækkefølge for Tailwind er:

@layer theme, base, components, utilities;

Det er præcis det, @import "tailwindcss" konfigurerer internt. Du kan angive din egen rækkefølge eller opdele den i flere erklæringer (@layer reset, base; og derefter @layer components, utilities;) og tildele regler til et navngivet lag med en 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; }
    }
');

Når du tilføjer grundtypografier med @layer base, placeres de under components og utilities, så en utility-klasse altid tilsidesætter dine standarder for elementer. Det samme gælder @layer components { … } for komponentklasser, der skal ligge under utilities. Anonyme lag og modifikatorer med layer() på @import gennemgås under Imports.

Næste trin

• Theme — @theme-tokens og temafunktionerne.
• Imports — @import, virtuelle moduler og modifikatorer med layer().
• Plugins — direktivet @plugin og plugin-API.
• @source — styr, hvilke filer og klasser der scannes.