# 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](https://tailwindphp.inline0.dev/da/docs/usage/theme); `@plugin` under [Plugins](https://tailwindphp.inline0.dev/da/docs/plugins); og `@source` under [@source](https://tailwindphp.inline0.dev/da/docs/usage/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.

```php
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](https://drafts.csswg.org/css-mixins-1/#apply-rule), 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](https://github.com/inline0/tailwindphp/issues/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:

```css
@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:

```css
@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()`:

```css
@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:

| Klasse | Output |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

`--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:

```css
.card {
    color: red;

    @variant hover {
        color: blue;
    }

    @variant dark {
        color: white;
    }
}
```

```css
.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:

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

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

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

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

```css
@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:

```css
@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:

```css
@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:

```php
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](https://tailwindphp.inline0.dev/da/docs/usage/imports).

## Næste trin

- [Theme](https://tailwindphp.inline0.dev/da/docs/usage/theme) — `@theme`-tokens og temafunktionerne.
- [Imports](https://tailwindphp.inline0.dev/da/docs/usage/imports) — `@import`, virtuelle moduler og modifikatorer med `layer()`.
- [Plugins](https://tailwindphp.inline0.dev/da/docs/plugins) — direktivet `@plugin` og plugin-API.
- [@source](https://tailwindphp.inline0.dev/da/docs/usage/source) — styr, hvilke filer og klasser der scannes.