# Direktiivid

Direktiivid on sisend-CSS-isse kirjutatavad, `@`-ga algavad at-reeglid, mille abil koostate, laiendate ja järjestate Tailwind väljundit. See leht käsitleb direktiive `@apply`, `@utility`, `@variant`, `@custom-variant` ja `@layer`. `@theme` käsitletakse lehel [Teema](https://tailwindphp.inline0.dev/et/docs/usage/theme), `@plugin` lehel [Pluginad](https://tailwindphp.inline0.dev/et/docs/plugins) ning `@source` lehel [@source](https://tailwindphp.inline0.dev/et/docs/usage/source).

## `@apply`

`@apply` lisab olemasolevate utiliitide deklaratsioonid teie enda selektorisse. Nii saate siduda utiliidistiilid semantilise klassiga, sealhulgas pesastatud selektorites ja meediapäringutes.

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

Variandid toimivad loendis `@apply` — `@apply bg-blue-500 hover:bg-blue-600;` laiendab oleku `:hover` ja kohanduvad eesliited, näiteks `@apply px-4 md:px-6 lg:px-8;`, väljastavad vastavad `@media` reeglid. Arvestatakse ka tähtsusmuutjat (`@apply !flex;`). Toetatud on pesastatud selektorid, seega rakendab näiteks reegel `.card { h2 { @apply text-xl font-bold; } }` utiliite pesastatud `h2`-ele.

`@apply` on lause: `@apply px-4 { … }` koos kehaga põhjustab vea. `@apply`, mis sisaldab ainult sidekriipsuga identifikaatoreid (`@apply --my-mixin;`), on CSS mixin mustandist [CSS mixins draft](https://drafts.csswg.org/css-mixins-1/#apply-rule)], mitte utiliitide loend, mistõttu TailwindPHP seda ei lahenda; mixini ja utiliitide paigutamine samasse `@apply`-i põhjustab vea (`You cannot use @apply with both mixins and utilities…`). Mixin-reeglid jäetakse praegu väljundist välja, mitte ei edastata edasi ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility` registreerib kohandatud utiliidi, mis osaleb Tailwind mootoris — paigutub kihti `utilities` ja aktsepteerib variante nagu sisseehitatud utiliidid. Staatilisel utiliidil on fikseeritud sisu:

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

Kuna tegu on päris utiliidiga, kombineeruvad variandid automaatselt (`hover:content-auto`, `md:content-auto`). Sisu võib ise kasutada `@apply` ja pesastatud selektoreid:

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

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

Funktsionaalse utiliidi nimi lõpeb järelliitega `-*` ning sobitatud väärtuse saab kätte käsuga `--value()`:

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

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

`--value()` lahendab kandidaadi väärtuse järjest iga allika alusel: teema nimeruumi (`--gutter-*`), andmetüübiga suvalise väärtuse (`[length]`) või lihtväärtuse tüübi (`integer`, `number`, `percentage`, `ratio`). Deklaratsioon, mille `--value()` ei lahene, jäetakse välja, nii et deklaratsioonide lisamine moodustab varuahelа:

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

`--modifier()` lahendab `/` järel oleva osa samamoodi: kui sisu sisaldab `line-height: --modifier(integer);`, väljastab ka `gutter-4/7` väärtuse `line-height: 7`. Utiliitide nimed järgivad TailwindCSS v4.3.3 reegleid: maksimaalselt üks `/`, `%` ainult lõpus pärast numbrit ning punktid ainult numbrite vahel.

## `@variant`

`@variant` rakendab variandi sinu enda CSS sees olevatele deklaratsioonidele ilma utiliiti määratlemata:

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

Variante saab aheldada (`@variant hover:focus`), komadega loetleda, üksteise sisse pesastada ja nimetada enda `@custom-variant`-eid. Ülemise taseme `@variant` ilma sisuta või `@slot`-ga käsitletakse tagasiühilduvuse huvides kui `@custom-variant`.

## `@custom-variant`

`@custom-variant` määratleb uue variandi, mille saad lisada mis tahes utiliidi ette. Lühivorm nimetab variandi ning annab sulgudes valija või at-reegli.

Valijate loendi variant kasutab elemendi tähistamiseks `&`:

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

`hocus:bg-blue-500` väljastab seejärel nii reegli `:hover` kui ka reegli `:focus`. Atribuudivorm toimib samamoodi:

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

At-reegli variant ümbritseb sobitatud utiliidid selle at-reegliga:

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

Kohandatud variante saab kombineerida sisseehitatud variantidega — `sm:hocus:bg-blue-500` pesastab valija `hocus` meediapäringu `sm` sisse. Keerukamate juhtude jaoks kasuta plokivormi, kus `@slot` märgib koha, kuhu utiliidi deklaratsioonid lisatakse:

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

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

## `@layer`

`@layer` juhib kaskaadi järjekorda, kasutades natiivseid CSS kaskadikihte. Ilma plokita `@layer` lause määrab kihtide järjekorra; hilisemad kihid võidavad valija spetsiifilisusest olenemata. Tailwind kanooniline järjekord on järgmine:

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

Täpselt nii seab `@import "tailwindcss"` selle sisemiselt paika. Võid määrata ise järjekorra või jagada selle mitme lause vahel (esmalt `@layer reset, base;`, seejärel `@layer components, utilities;`) ning määrata reeglid nimega kihile ploki abil:

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

Baastiilide lisamine `@layer base` kaudu hoiab need allpool `components` ja `utilities`, nii et utiliidiklass alistab alati elemendi vaikestiilid. Sama kehtib `@layer components { … }` kohta, mida kasutatakse utiliitide alla jäävate komponendiklasside jaoks. Anonüümseid kihte ja `@import`-i `layer()`-modifikaatoreid käsitleb [Imports](https://tailwindphp.inline0.dev/et/docs/usage/imports).

## Järgmised sammud

- [Theme](https://tailwindphp.inline0.dev/et/docs/usage/theme) — `@theme` tokenid ja teema funktsioonid.
- [Imports](https://tailwindphp.inline0.dev/et/docs/usage/imports) — `@import`, virtuaalmoodulid ja `layer()`-modifikaatorid.
- [Plugins](https://tailwindphp.inline0.dev/et/docs/plugins) — `@plugin`-direktiiv ja plugina API.
- [@source](https://tailwindphp.inline0.dev/et/docs/usage/source) — määra, milliseid faile ja klasse skannitakse.