# Direktyvos

Direktyvos yra įvesties CSS faile rašomos at-rule taisyklės su priešdėliu `@`, skirtos Tailwind išvesties komponavimui, išplėtimui ir tvarkos nustatymui. Šiame puslapyje aptariamos `@apply`, `@utility`, `@variant`, `@custom-variant` ir `@layer`. Apie `@theme` rašoma skiltyje [Tema](https://tailwindphp.inline0.dev/lt/docs/usage/theme); apie `@plugin` – skiltyje [Papildiniai](https://tailwindphp.inline0.dev/lt/docs/plugins); o apie `@source` – skiltyje [@source](https://tailwindphp.inline0.dev/lt/docs/usage/source).

## `@apply`

`@apply` įterpia esamų paslaugų deklaracijas į jūsų parinkiklį. Naudokite ją, kad paslaugų stilius priskirtumėte semantinei klasei, taip pat įdėtuosiuose parinkikliuose ir medijos užklausose.

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

Variantai veikia `@apply` sąraše: `@apply bg-blue-500 hover:bg-blue-600;` išplečia būseną `:hover`, o adaptyvūs priešdėliai, pavyzdžiui, `@apply px-4 md:px-6 lg:px-8;`, sukuria atitinkamas `@media` taisykles. Taip pat palaikomas svarbos modifikatorius (`@apply !flex;`). Įdėtieji parinkikliai taip pat palaikomi, todėl tokia taisyklė kaip `.card { h2 { @apply text-xl font-bold; } }` taiko paslaugas įdėtam `h2`.

`@apply` yra sakinys: `@apply px-4 { … }` su turiniu sukelia klaidą. `@apply`, kuriame nurodyti tik brūkšneliais atskirti identifikatoriai (`@apply --my-mixin;`), yra CSS maišiklis iš juodraščio [CSS maišiklių](https://drafts.csswg.org/css-mixins-1/#apply-rule), o ne paslaugų sąrašas, todėl TailwindPHP jo neatpažįsta; į tą patį `@apply` įtraukus maišiklį ir paslaugas, sukeliama klaida (`You cannot use @apply with both mixins and utilities…`). Šiuo metu maišiklių taisyklės išmetamos iš išvesties, o ne perduodamos toliau ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility` registruoja tinkintą paslaugą, kuri dalyvauja Tailwind variklio veikloje – ji surūšiuojama į sluoksnį `utilities` ir, kaip bet kuri integruotoji paslauga, priima variantus. Statinės paslaugos turinys yra nekintamas:

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

Kadangi tai tikra paslauga, variantai derinami automatiškai (`hover:content-auto`, `md:content-auto`). Pačiame turinyje gali būti naudojama `@apply` ir įdėtieji parinkikliai:

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

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

Funkcinės paslaugos pavadinime naudojamas priesagas `-*`, o atitinkančiai reikšmei nuskaityti naudojama `--value()`:

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

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

`--value()` iš eilės nustato kandidato reikšmę pagal kiekvieną šaltinį: temos vardų sritį (`--gutter-*`), savavališką reikšmę su duomenų tipu (`[length]`) arba nurodytą reikšmės tipą (`integer`, `number`, `percentage`, `ratio`). Deklaracija, kurios `--value()` reikšmės nepavyksta nustatyti, pašalinama, todėl sudėjus deklaracijas gaunama atsarginių reikšmių seka:

| Klasė | Išvestis |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

`--modifier()` taip pat apdoroja dalį po `/` tokiu pačiu būdu: jei turinyje yra `line-height: --modifier(integer);`, `gutter-4/7` taip pat išveda `line-height: 7`. Paslaugų pavadinimai atitinka TailwindCSS v4.3.3 taisykles: gali būti ne daugiau kaip vienas `/`, `%` leidžiamas tik pabaigoje po skaitmens, o taškai galimi tik tarp skaitmenų.

## `@variant`

`@variant` pritaiko variantą deklaracijoms jūsų CSS viduje, neapibrėždama paslaugos:

```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 galima jungti (`@variant hover:focus`), vardyti atskiriant kableliais, dėti vieną į kitą ir nurodyti savo `@custom-variant`. Aukščiausio lygio `@variant` be turinio arba su `@slot` dėl atgalinio suderinamumo laikoma `@custom-variant`.

## `@custom-variant`

`@custom-variant` apibrėžia naują variantą, kurį galite pridėti kaip priešdėlį prie bet kurios paslaugos. Glaustoje formoje nurodomas varianto pavadinimas, skliaustuose pateikiamas parinkiklis arba at-rule.

Parinkiklių sąrašo variante elemento vieta žymima `&`:

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

`hocus:bg-blue-500` išveda ir taisykles `:hover`, ir `:focus`. Atributo forma veikia taip pat:

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

At-rule variantas apgaubia atitinkančias paslaugas ta at-rule taisykle:

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

Tinkinti variantai jungiami su integruotaisiais: `sm:hocus:bg-blue-500` įdeda parinkiklį `hocus` į medijos užklausą `sm`. Sudėtingesniems atvejams naudokite bloko formą; `@slot` žymi vietą, kur įterpiamos paslaugos deklaracijos:

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

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

## `@layer`

`@layer` valdo pakopų tvarką naudodama savąsias CSS pakopų sluoksnių funkcijas. Tuščias `@layer` sakinys deklaruoja sluoksnių tvarką; vėlesni sluoksniai turi pirmenybę nepriklausomai nuo parinkiklio specifiškumo. Kanoninė Tailwind tvarka:

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

Būtent tai `@import "tailwindcss"` nustato viduje. Galite deklaruoti savo tvarką arba ją išskaidyti į kelis sakinius (pirmiausia `@layer reset, base;`, tada `@layer components, utilities;`), o taisykles priskirti įvardytam sluoksniui naudodami 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; }
    }
');
```

Įtraukus pagrindinius stilius per `@layer base`, jie lieka žemiau `components` ir `utilities`, todėl paslaugos klasė visada perrašo numatytuosius elementų stilius. Tas pats taikoma `@layer components { … }` komponentų klasėms, kurios turi būti žemiau paslaugų. Apie anoniminius sluoksnius ir modifikatorius `layer()` ties `@import` rašoma skiltyje [Importai](https://tailwindphp.inline0.dev/lt/docs/usage/imports).

## Tolesni veiksmai

- [Tema](https://tailwindphp.inline0.dev/lt/docs/usage/theme) – `@theme` žetonai ir temos funkcijos.
- [Importai](https://tailwindphp.inline0.dev/lt/docs/usage/imports) – `@import`, virtualieji moduliai ir modifikatoriai `layer()`.
- [Papildiniai](https://tailwindphp.inline0.dev/lt/docs/plugins) – direktyva `@plugin` ir papildinio API.
- [@source](https://tailwindphp.inline0.dev/lt/docs/usage/source) – valdykite, kurie failai ir klasės nuskaitomi.