# Direktiv

Direktiv är at-regler med prefixet `@` som du skriver i din indatakod CSS för att sätta samman, utöka och ordna utdata från Tailwind. Den här sidan går igenom `@apply`, `@utility`, `@variant`, `@custom-variant` och `@layer`. `@theme` beskrivs under [Tema](https://tailwindphp.inline0.dev/sv/docs/usage/theme), `@plugin` under [Pluginer](https://tailwindphp.inline0.dev/sv/docs/plugins) och `@source` under [@source](https://tailwindphp.inline0.dev/sv/docs/usage/source).

## `@apply`

`@apply` bäddar in deklarationerna från befintliga verktyg i din egen selektor. Använd den för att koppla verktygsstilar till en semantisk klass, även inuti nästlade selektorer och mediefrågor.

```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 fungerar i en lista med `@apply` – `@apply bg-blue-500 hover:bg-blue-600;` utökar tillståndet `:hover`, och responsiva prefix som `@apply px-4 md:px-6 lg:px-8;` skapar motsvarande regler för `@media`. Även modifieraren för viktig prioritet används (`@apply !flex;`). Nästlade selektorer stöds, så en regel som `.card { h2 { @apply text-xl font-bold; } }` tillämpar verktyg på den nästlade `h2`.

`@apply` är en sats: `@apply px-4 { … }` med en kropp ger ett fel. En `@apply` som bara innehåller bindestrecksskrivna identifierare (`@apply --my-mixin;`) är en CSS-mixin från utkastet om mixiner [CSS](https://drafts.csswg.org/css-mixins-1/#apply-rule), inte en verktygslista, så TailwindPHP kan inte hitta den. Om en mixin och verktyg placeras i samma `@apply` uppstår ett fel (`You cannot use @apply with both mixins and utilities…`). Mixinregler utelämnas för närvarande från utdata i stället för att skickas vidare ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility` registrerar ett anpassat verktyg som ingår i motorn i Tailwind. Det sorteras in i lagret `utilities` och godtar varianter precis som inbyggda verktyg. Ett statiskt verktyg har en fast kropp:

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

Eftersom det är ett riktigt verktyg kombineras varianter automatiskt (`hover:content-auto`, `md:content-auto`). Kroppen kan själv använda `@apply` och nästlade selektorer:

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

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

Ett funktionellt verktyg använder suffixet `-*` i namnet och hämtar det matchade värdet med `--value()`:

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

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

`--value()` prövar kandidatens värde mot varje källa i tur och ordning: ett temautrymme (`--gutter-*`), ett godtyckligt värde med datatyp (`[length]`) eller en fristående värdetyp (`integer`, `number`, `percentage`, `ratio`). Deklarationer vars `--value()` inte kan matchas utelämnas, så flera deklarationer i följd ger en reservkedja:

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

`--modifier()` matchar delen efter ett `/` på samma sätt: med `line-height: --modifier(integer);` i kroppen skapar även `gutter-4/7` `line-height: 7`. Verktygsnamn följer reglerna i TailwindCSS v4.3.3: högst ett `/`, `%` bara sist och efter en siffra, och punkter endast mellan siffror.

## `@variant`

`@variant` tillämpar en variant på deklarationerna i din egen CSS utan att definiera ett verktyg:

```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 staplas (`@variant hover:focus`), skrivas kommaseparerade och nästlas i varandra. De kan också ange dina egna `@custom-variant`s. En toppnivå-`@variant` utan kropp, eller med `@slot`, behandlas som `@custom-variant` för bakåtkompatibilitet.

## `@custom-variant`

`@custom-variant` definierar en ny variant som du kan använda som prefix på valfritt verktyg. I det kompakta formatet anges variantens namn samt en selektor eller at-regel inom parenteser.

En variant med en selektorlista använder `&` för elementet:

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

`hocus:bg-blue-500` skapar sedan både reglerna för `:hover` och `:focus`. Attributsformatet fungerar på samma sätt:

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

En at-regelvariant omsluter matchade verktyg med at-regeln:

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

Anpassade varianter kan staplas med inbyggda – `sm:hocus:bg-blue-500` nästlar selektorn `hocus` inuti mediefrågan `sm`. I mer avancerade fall använder du blockformatet med `@slot` för att markera var verktygets deklarationer ska infogas:

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

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

## `@layer`

`@layer` styr ordningen i kaskaden med hjälp av inbyggda kaskadlager i CSS. En ensam `@layer`-sats deklarerar lagrens ordning. Senare lager har företräde oavsett selektorspecificitet. Den kanoniska ordningen för Tailwind är:

```css
@layer theme, base, components, utilities;
```

Det här är precis vad `@import "tailwindcss"` ställer in internt. Du kan deklarera en egen ordning eller dela upp den på flera satser (`@layer reset, base;` följt av `@layer components, utilities;`) och tilldela regler till ett namngivet lager med ett block:

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

Basstilar som läggs till via `@layer base` hamnar under `components` och `utilities`, så en verktygsklass åsidosätter alltid standardstilarna för dina element. Detsamma gäller `@layer components { … }` för komponentklasser som ska ligga under verktygen. Anonyma lager och modifierare för `layer()` på `@import` beskrivs under [Importer](https://tailwindphp.inline0.dev/sv/docs/usage/imports).

## Nästa steg

- [Tema](https://tailwindphp.inline0.dev/sv/docs/usage/theme) – `@theme`-token och temafunktioner.
- [Importer](https://tailwindphp.inline0.dev/sv/docs/usage/imports) – `@import`, virtuella moduler och modifierare för `layer()`.
- [Pluginer](https://tailwindphp.inline0.dev/sv/docs/plugins) – direktivet `@plugin` och pluginens API.
- [@source](https://tailwindphp.inline0.dev/sv/docs/usage/source) – styr vilka filer och klasser som genomsöks.