# Direktīvas

Direktīvas ir `@` prefiksētie at-rules noteikumi, ko rakstāt ievades CSS, lai apvienotu, paplašinātu un sakārtotu Tailwind izvadi. Šajā lapā aplūkoti `@apply`, `@utility`, `@variant`, `@custom-variant` un `@layer`. `@theme` ir aprakstīts sadaļā [Motīvs](https://tailwindphp.inline0.dev/lv/docs/usage/theme); `@plugin` — sadaļā [Spraudņi](https://tailwindphp.inline0.dev/lv/docs/plugins); bet `@source` — sadaļā [@source](https://tailwindphp.inline0.dev/lv/docs/usage/source).

## `@apply`

`@apply` iekļauj esošo utilītu deklarācijas jūsu selektorā. Izmantojiet to, lai piesaistītu utilītu stilus semantiskai klasei, tostarp ligzdotos selektoros un multivides vaicājumos.

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

Varianti darbojas `@apply` sarakstā — `@apply bg-blue-500 hover:bg-blue-600;` izvērš `:hover` stāvokli, bet responsīvie prefiksi, piemēram, `@apply px-4 md:px-6 lg:px-8;`, ģenerē atbilstošos `@media` noteikumus. Tiek ievērots arī svarīguma modifikators (`@apply !flex;`). Tiek atbalstīti ligzdoti selektori, tāpēc tāds noteikums kā `.card { h2 { @apply text-xl font-bold; } }` piemēro utilītas ligzdotajam `h2`.

`@apply` ir priekšraksts: `@apply px-4 { … }` ar bloku izraisa kļūdu. `@apply`, kurā norādīti tikai defises saturoši identifikatori (`@apply --my-mixin;`), ir CSS jaukšanas funkcija no [CSS mixins draft](https://drafts.csswg.org/css-mixins-1/#apply-rule), nevis utilītu saraksts, tāpēc TailwindPHP to neatrisina; jaukšanas funkcijas un utilītu ievietošana vienā `@apply` izraisa kļūdu (`You cannot use @apply with both mixins and utilities…`). Pašlaik jaukšanas funkciju noteikumi tiek atmesti, nevis nodoti tālāk ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility` reģistrē pielāgotu utilītu, kas darbojas Tailwind dzinējā — tā tiek sakārtota `utilities` slānī un pieņem variantus tāpat kā iebūvētās utilītas. Statiskai utilītai ir fiksēts bloks:

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

Tā kā tā ir īsta utilīta, varianti tiek kombinēti automātiski (`hover:content-auto`, `md:content-auto`). Blokā var izmantot arī `@apply` un ligzdotus selektorus:

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

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

Funkcionālās utilītas nosaukumā izmanto sufiksu `-*` un nolasa atbilstošo vērtību ar `--value()`:

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

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

`--value()` secīgi pārbauda kandidāta vērtību katrā avotā: motīva nosaukumvietā (`--gutter-*`), patvaļīgā vērtībā ar datu tipu (`[length]`) vai vienkāršā vērtības tipā (`integer`, `number`, `percentage`, `ratio`). Ja deklarācijas `--value()` netiek atrisināts, tā tiek atmesta, tāpēc, sakraujot deklarācijas, var izveidot rezerves vērtību ķēdi:

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

`--modifier()` atrisina daļu pēc `/` tāpat: ja blokā ir `line-height: --modifier(integer);`, `gutter-4/7` ģenerē arī `line-height: 7`. Utilītu nosaukumos tiek ievēroti TailwindCSS v4.3.3 noteikumi: ne vairāk kā viens `/`, `%` tikai beigās pēc cipara, bet punkti tikai starp cipariem.

## `@variant`

`@variant` piemēro variantu deklarācijām jūsu CSS, nedefinējot utilītu:

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

Variantus var sakraut (`@variant hover:focus`), norādīt ar komatiem, ievietot citu citā, kā arī nosaukt savus `@custom-variant`. Augstākā līmeņa `@variant` bez bloka vai ar `@slot` atpakaļsaderības nolūkos tiek uzskatīts par `@custom-variant`.

## `@custom-variant`

`@custom-variant` definē jaunu variantu, ko var pievienot kā prefiksu jebkurai utilītai. Kompaktajā formā norāda varianta nosaukumu un selektoru vai at-rule iekavās.

Selektoru saraksta variants izmanto `&` elementa apzīmēšanai:

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

`hocus:bg-blue-500` pēc tam ģenerē gan `:hover`, gan `:focus` noteikumus. Atribūta forma darbojas tāpat:

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

At-rule variants ietver atbilstošās utilītas šajā at-rule:

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

Pielāgotos variantus var kombinēt ar iebūvētajiem — `sm:hocus:bg-blue-500` ievieto selektoru `hocus` multivides vaicājumā `sm`. Sarežģītākiem gadījumiem izmantojiet bloka formu, kurā `@slot` norāda, kur tiek ievietotas utilītas deklarācijas:

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

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

## `@layer`

`@layer` kontrolē kaskādes secību, izmantojot vietējos CSS kaskādes slāņus. Vienkāršs `@layer` priekšraksts deklarē slāņu secību; vēlākie slāņi ir prioritāri neatkarīgi no selektora specifiskuma. Tailwind kanoniskā secība ir šāda:

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

Tieši to `@import "tailwindcss"` iestata iekšēji. Varat deklarēt savu secību vai sadalīt to vairākos priekšrakstos (`@layer reset, base;`, pēc tam `@layer components, utilities;`), kā arī piešķirt noteikumus nosauktam slānim, izmantojot 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; }
    }
');
```

Pievienojot pamata stilus ar `@layer base`, tie paliek zem `components` un `utilities`, tāpēc utilītas klase vienmēr pārraksta elementa noklusējuma stilus. Tas pats attiecas uz `@layer components { … }` komponentu klasēm, kurām jāatrodas zem utilītām. Anonīmi slāņi un `@import` modifikatori uz `layer()` ir aplūkoti sadaļā [Imports](https://tailwindphp.inline0.dev/lv/docs/usage/imports).

## Nākamās darbības

- [Motīvs](https://tailwindphp.inline0.dev/lv/docs/usage/theme) — `@theme` tokeni un motīva funkcijas.
- [Importi](https://tailwindphp.inline0.dev/lv/docs/usage/imports) — `@import`, virtuālie moduļi un `layer()` modifikatori.
- [Spraudņi](https://tailwindphp.inline0.dev/lv/docs/plugins) — direktīva `@plugin` un spraudņa API.
- [@source](https://tailwindphp.inline0.dev/lv/docs/usage/source) — nosaka, kuriem failiem tiek meklētas klases.