# Direktívák

A direktívák olyan `@` előtagú at-szabályok, amelyeket a bemeneti CSS fájlban írhat a Tailwind kimenetének összeállításához, bővítéséhez és sorrendezéséhez. Ez az oldal a következőket ismerteti: `@apply`, `@utility`, `@variant`, `@custom-variant` és `@layer`. A `@theme` leírását a [Téma](https://tailwindphp.inline0.dev/hu/docs/usage/theme), a `@plugin`-ét a [Bővítmények](https://tailwindphp.inline0.dev/hu/docs/plugins), a `@source`-ét pedig az [@source](https://tailwindphp.inline0.dev/hu/docs/usage/source) oldal tartalmazza.

## `@apply`

A `@apply` meglévő segédosztályok deklarációit illeszti be a saját szelektorába. Segítségével segédosztály-stílusokat rendelhet szemantikus osztályhoz, akár egymásba ágyazott szelektorokon és médialekérdezéseken belül is.

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

A változatok rendezett `@apply` listában működnek: a `@apply bg-blue-500 hover:bg-blue-600;` kibontja a `:hover` állapotot, a reszponzív előtagok, például a `@apply px-4 md:px-6 lg:px-8;` pedig kiadják a megfelelő `@media` szabályokat. Az important módosító is érvényesül (`@apply !flex;`). A beágyazott szelektorok is támogatottak, ezért az olyan szabály, mint a `.card { h2 { @apply text-xl font-bold; } }`, segédosztályokat alkalmaz a beágyazott `h2` elemre.

A `@apply` egy utasítás: a törzzsel rendelkező `@apply px-4 { … }` hibát okoz. A kizárólag kötőjeles azonosítókat felsoroló `@apply` (`@apply --my-mixin;`) a [CSS keverékek tervezetéből](https://drafts.csswg.org/css-mixins-1/#apply-rule) származó CSS keverék, nem segédosztálylista, ezért a TailwindPHP nem oldja fel; a keverék és a segédosztályok egyazon `@apply`-be helyezése hibát okoz (`You cannot use @apply with both mixins and utilities…`). A keverékszabályok jelenleg kimenet nélkül eldobódnak, nem kerülnek át változatlanul ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

A `@utility` egyéni segédosztályt regisztrál, amely részt vesz a Tailwind motorjában — a `utilities` rétegbe kerül, és a beépített segédosztályokhoz hasonlóan változatokat fogad el. A statikus segédosztály törzse rögzített:

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

Mivel valódi segédosztályról van szó, a változatok automatikusan kombinálhatók (`hover:content-auto`, `md:content-auto`). A törzsben `@apply` és beágyazott szelektorok is használhatók:

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

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

A funkcionális segédosztály nevében `-*` utótag szerepel, és a `--value()` segítségével olvassa be a hozzá illeszkedő értéket:

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

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

A `--value()` sorban egyezteti a jelölt értékét minden forrással: egy tématérnévvel (`--gutter-*`), adattípust megadó tetszőleges értékkel (`[length]`), vagy egy csupasz értéktípussal (`integer`, `number`, `percentage`, `ratio`). Ha a deklaráció `--value()` értéke nem oldható fel, a rendszer eldobja, így a deklarációk egymásra halmozásával tartaléklánc hozható létre:

| Osztály | Kimenet |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

A `--modifier()` a `/` utáni részt is ugyanúgy oldja fel: ha a törzsben `line-height: --modifier(integer);` szerepel, akkor a `gutter-4/7` is kibocsátja a `line-height: 7`-t. A segédosztályok nevei a TailwindCSS v4.3.3 szabályait követik: legfeljebb egy `/` lehet bennük, a `%` csak a végén, egy számjegy után állhat, pont pedig csak számjegyek között szerepelhet.

## `@variant`

A `@variant` változatot alkalmaz a saját CSS-on belüli deklarációkra anélkül, hogy segédosztályt definiálna:

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

A változatok egymásra építhetők (`@variant hover:focus`), vesszővel felsorolhatók, egymásba ágyazhatók, és saját `@custom-variant`-okat is megnevezhetnek. A felső szintű `@variant` törzs nélkül vagy `@slot`-szal `@custom-variant`-ként működik a visszafelé kompatibilitás érdekében.

## `@custom-variant`

A `@custom-variant` új változatot definiál, amely bármely segédosztály elé írható. A tömör forma megadja a változat nevét, majd zárójelben egy szelektort vagy at-szabályt.

A szelektorlistás változat az `&` elemet használja az elem helyett:

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

A `hocus:bg-blue-500` ezután a `:hover` és a `:focus` szabályt is kibocsátja. Az attribútumos forma ugyanígy működik:

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

Az at-szabályos változat a hozzá illeszkedő segédosztályokat az adott at-szabályba csomagolja:

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

Az egyéni változatok beépített változatokkal is kombinálhatók: a `sm:hocus:bg-blue-500` a `hocus` szelektort a `sm` médiakérdésbe ágyazza. Bonyolultabb esetekben használja a blokkos formát, ahol a `@slot` jelöli a segédosztály deklarációinak beillesztési helyét:

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

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

## `@layer`

A `@layer` a natív CSS kaszkádrétegek segítségével szabályozza a kaszkád sorrendjét. Egy önálló `@layer` utasítás megadja a rétegek sorrendjét; a későbbi rétegek nyernek a szelektorspecifitástól függetlenül. A Tailwind kanonikus sorrendje:

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

A `@import "tailwindcss"` pontosan ezt állítja be belsőleg. Megadhatja saját sorrendjét, vagy több utasításra bonthatja (előbb `@layer reset, base;`, majd `@layer components, utilities;`), a szabályokat pedig blokk segítségével rendelheti egy elnevezett réteghez:

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

Az alapstílusok `@layer base`-on keresztüli hozzáadása a `components` és a `utilities` alá helyezi őket, így egy segédosztály mindig felülírja az elem alapértelmezéseit. Ugyanez érvényes a `@layer components { … }`-ra is, ha azt szeretné, hogy a komponensosztályok a segédosztályok alatt legyenek. A névtelen rétegekről és a `@import`-on használt `layer()` módosítókról az [Imports](https://tailwindphp.inline0.dev/hu/docs/usage/imports) részben olvashat.

## Következő lépések

- [Theme](https://tailwindphp.inline0.dev/hu/docs/usage/theme) — `@theme` tokenek és a témához tartozó függvények.
- [Imports](https://tailwindphp.inline0.dev/hu/docs/usage/imports) — `@import`, virtuális modulok és `layer()` módosítók.
- [Plugins](https://tailwindphp.inline0.dev/hu/docs/plugins) — a `@plugin` direktíva és a bővítmény API.
- [@source](https://tailwindphp.inline0.dev/hu/docs/usage/source) — szabályozza, mely fájlokat és osztályokat vizsgálja a rendszer.