# Direktívy

Direktívy sú pravidlá at-rule s predponou `@`, ktoré zapisujete do vstupného súboru CSS na skladanie, rozširovanie a určovanie poradia výstupu Tailwind. Táto stránka sa venuje direktívam `@apply`, `@utility`, `@variant`, `@custom-variant` a `@layer`. `@theme` sa opisuje v časti [Téma](https://tailwindphp.inline0.dev/sk/docs/usage/theme); `@plugin` v časti [Pluginy](https://tailwindphp.inline0.dev/sk/docs/plugins); a `@source` v časti [@source](https://tailwindphp.inline0.dev/sk/docs/usage/source).

## `@apply`

`@apply` vloží deklarácie existujúcich utilít do vášho vlastného selektora. Použite ho na priradenie štýlov utilít k sémantickej triede, a to aj v rámci vnorených selektorov a mediálnych dopytov.

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

Varianty fungujú v zozname `@apply` — `@apply bg-blue-500 hover:bg-blue-600;` rozbalí stav `:hover` a responzívne predpony, ako je `@apply px-4 md:px-6 lg:px-8;`, vytvárajú zodpovedajúce pravidlá `@media`. Rešpektuje sa aj modifikátor dôležitosti (`@apply !flex;`). Podporované sú aj vnorené selektory, takže pravidlo ako `.card { h2 { @apply text-xl font-bold; } }` použije utility na vnorený prvok `h2`.

`@apply` je príkaz: `@apply px-4 { … }` s telom vyvolá chybu. `@apply`, ktoré obsahuje iba identifikátory s pomlčkami (`@apply --my-mixin;`), je mixin CSS z návrhu mixinov [CSS](https://drafts.csswg.org/css-mixins-1/#apply-rule), nie zoznam utilít, takže TailwindPHP ho nerozpozná; kombinácia mixinu a utilít v tom istom `@apply` vyvolá chybu (`You cannot use @apply with both mixins and utilities…`). Pravidlá mixinov sa momentálne z výstupu zahadzujú namiesto toho, aby sa odovzdali ďalej ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility` registruje vlastnú utilitu, ktorá sa zapája do mechanizmu Tailwind — triedi sa do vrstvy `utilities` a prijíma varianty ako každá vstavaná utilita. Statická utilita má pevne dané telo:

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

Keďže ide o skutočnú utilitu, varianty sa skladajú automaticky (`hover:content-auto`, `md:content-auto`). Telo môže samo používať `@apply` a vnorené selektory:

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

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

Funkčná utilita používa príponu `-*` v názve a získava zodpovedajúcu hodnotu pomocou `--value()`:

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

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

`--value()` postupne vyhodnocuje hodnotu kandidáta voči každému zdroju: mennému priestoru témy (`--gutter-*`), ľubovoľnej hodnote s dátovým typom (`[length]`) alebo holému typu hodnoty (`integer`, `number`, `percentage`, `ratio`). Deklarácia, ktorej `--value()` sa nepodarí vyhodnotiť, sa zahodí, takže zoskupením deklarácií vytvoríte reťazec náhradných hodnôt:

| Trieda | Výstup |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

`--modifier()` vyhodnocuje časť za `/` rovnakým spôsobom: ak telo obsahuje `line-height: --modifier(integer);`, `gutter-4/7` vytvorí aj `line-height: 7`. Názvy utilít sa riadia pravidlami TailwindCSS v4.3.3: najviac jeden `/`, `%` iba na konci za číslicou a bodky iba medzi číslicami.

## `@variant`

`@variant` použije variant na deklarácie vo vašom vlastnom CSS bez definovania 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;
  }
}
```

Varianty možno skladať (`@variant hover:focus`), uvádzať oddelené čiarkami, vnárať jeden do druhého a pomenovať vlastné `@custom-variant`. Vrcholová direktíva `@variant` bez tela alebo s `@slot` sa kvôli spätnej kompatibilite považuje za `@custom-variant`.

## `@custom-variant`

`@custom-variant` definuje nový variant, ktorý môžete pridať ako predponu k ľubovoľnej utilite. Skrátený zápis uvádza názov variantu a v zátvorkách selektor alebo pravidlo at-rule.

Variant so zoznamom selektorov používa `&` pre prvok:

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

`hocus:bg-blue-500` potom vytvorí pravidlá pre `:hover` aj `:focus`. Rovnako funguje aj zápis s atribútom:

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

Variant at-rule obaľuje zodpovedajúce utility týmto pravidlom at-rule:

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

Vlastné varianty možno kombinovať so vstavanými — `sm:hocus:bg-blue-500` vnorí selektor `hocus` do mediálneho dopytu `sm`. Pre zložitejšie prípady použite blokový zápis, v ktorom `@slot` označuje miesto vloženia deklarácií utility:

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

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

## `@layer`

`@layer` riadi poradie kaskády pomocou natívnych vrstiev kaskády CSS. Samostatný príkaz `@layer` deklaruje poradie vrstiev; neskoršie vrstvy majú prednosť bez ohľadu na špecifickosť selektora. Kanonické poradie v Tailwind je:

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

Presne takto sa to nastavuje interne v `@import "tailwindcss"`. Môžete deklarovať vlastné poradie alebo ho rozdeliť medzi viacero príkazov (`@layer reset, base;` a potom `@layer components, utilities;`) a priradiť pravidlá pomenovanej vrstve pomocou bloku:

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

Pridaním základných štýlov cez `@layer base` ich zaradíte pred `components` a `utilities`, takže trieda utility vždy prepíše predvolené štýly prvku. To isté platí pre `@layer components { … }`, ktoré slúži pre triedy komponentov, ktoré majú byť pod utilitami. Anonymné vrstvy a modifikátory `layer()` v `@import` opisuje časť [Importy](https://tailwindphp.inline0.dev/sk/docs/usage/imports).

## Ďalšie kroky

- [Téma](https://tailwindphp.inline0.dev/sk/docs/usage/theme) — `@theme` tokeny a funkcie témy.
- [Importy](https://tailwindphp.inline0.dev/sk/docs/usage/imports) — `@import`, virtuálne moduly a modifikátory `layer()`.
- [Pluginy](https://tailwindphp.inline0.dev/sk/docs/plugins) — direktíva `@plugin` a API pluginov.
- [@source](https://tailwindphp.inline0.dev/sk/docs/usage/source) — určte, ktoré súbory a triedy sa majú skenovať.