# 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](https://tailwindphp.inline0.dev/sl/docs/usage/theme); `@plugin` v razdelku [Vtičniki](https://tailwindphp.inline0.dev/sl/docs/plugins); `@source` pa v razdelku [@source](https://tailwindphp.inline0.dev/sl/docs/usage/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.

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

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

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

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

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

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

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

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

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:

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

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

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

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

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

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

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

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

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

## Naslednji koraki

- [Tema](https://tailwindphp.inline0.dev/sl/docs/usage/theme) — žetoni `@theme` in funkcije teme.
- [Uvozi](https://tailwindphp.inline0.dev/sl/docs/usage/imports) — `@import`, navidezni moduli in modifikatorji `layer()`.
- [Vtičniki](https://tailwindphp.inline0.dev/sl/docs/plugins) — direktiva `@plugin` in API vtičnika.
- [@source](https://tailwindphp.inline0.dev/sl/docs/usage/source) — nadzor nad datotekami in razredi, ki se pregledujejo.