# Yönergeler

Yönergeler, girdi CSS dosyanızda `@` önekiyle yazdığınız ve Tailwind çıktısını oluşturmak, genişletmek ve sıralamak için kullandığınız at-rule'lardır. Bu sayfada `@apply`, `@utility`, `@variant`, `@custom-variant` ve `@layer` ele alınır. `@theme`, [Tema](https://tailwindphp.inline0.dev/tr/docs/usage/theme) bölümünde; `@plugin`, [Eklentiler](https://tailwindphp.inline0.dev/tr/docs/plugins) bölümünde; `@source` ise [@source](https://tailwindphp.inline0.dev/tr/docs/usage/source) bölümünde açıklanır.

## `@apply`

`@apply`, mevcut yardımcı sınıfların bildirimlerini kendi seçicinize ekler. Yardımcı sınıf stillerini anlamsal bir sınıfa, iç içe seçiciler ve medya sorguları da dahil olmak üzere, eklemek için kullanın.

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

Varyantlar `@apply` listesinde çalışır: `@apply bg-blue-500 hover:bg-blue-600;`, `:hover` durumunu genişletir; `@apply px-4 md:px-6 lg:px-8;` gibi duyarlı önekler de ilgili `@media` kurallarını üretir. Önemli değiştiricisi de dikkate alınır (`@apply !flex;`). İç içe seçiciler desteklenir; böylece `.card { h2 { @apply text-xl font-bold; } }` gibi bir kural yardımcı sınıfları iç içe `h2` öğesine uygular.

`@apply` bir ifadedir: gövdeli `@apply px-4 { … }` hata verir. Yalnızca tireli tanımlayıcılar (`@apply --my-mixin;`) listeleyen bir `@apply`, [CSS mixins taslağındaki](https://drafts.csswg.org/css-mixins-1/#apply-rule) bir CSS mixin'idir; yardımcı sınıf listesi değildir, bu yüzden TailwindPHP bunu çözümleyemez. Aynı `@apply` içinde bir mixin ile yardımcı sınıfları kullanmak hata verir (`You cannot use @apply with both mixins and utilities…`). Mixin kuralları şu anda çıktıya aktarılmak yerine çıkarılır ([#12](https://github.com/inline0/tailwindphp/issues/12)).

## `@utility`

`@utility`, Tailwind motoruna katılan özel bir yardımcı sınıf kaydeder; `utilities` katmanında sıralanır ve yerleşik sınıflar gibi varyantları kabul eder. Statik yardımcı sınıfın gövdesi sabittir:

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

Gerçek bir yardımcı sınıf olduğu için varyantlar otomatik olarak birleştirilir (`hover:content-auto`, `md:content-auto`). Gövde, `@apply` ve iç içe seçicileri de kullanabilir:

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

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

İşlevsel bir yardımcı sınıfın adında `-*` soneki bulunur ve eşleşen değeri `--value()` ile okur:

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

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

`--value()`, adayın değerini sırayla her kaynağa göre çözümler: bir tema ad alanı (`--gutter-*`), veri türü belirtilmiş keyfi bir değer (`[length]`) veya yalın bir değer türü (`integer`, `number`, `percentage`, `ratio`). `--value()` çözümlenemeyen bir bildirim çıkarılır; bu nedenle bildirimleri üst üste eklemek bir geri dönüş zinciri oluşturur:

| Sınıf | Çıktı |
|---|---|
| `gutter-wide` | `padding-inline: var(--gutter-wide);` |
| `gutter-[5px]` | `padding-inline: 5px;` |
| `gutter-4` | `padding-inline: calc(var(--spacing) * 4);` |

`--modifier()`, `/` sonrasındaki kısmı da aynı şekilde çözümler: gövdede `line-height: --modifier(integer);` varsa, `gutter-4/7` ayrıca `line-height: 7` üretir. Yardımcı sınıf adları TailwindCSS v4.3.3 kurallarına uyar: en fazla bir `/`, `%` yalnızca sonda ve bir rakamdan sonra, noktalar ise yalnızca rakamların arasında olabilir.

## `@variant`

`@variant`, bir yardımcı sınıf tanımlamadan kendi CSS öğenizin içindeki bildirimlere bir varyant uygular:

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

Varyantlar üst üste eklenebilir (`@variant hover:focus`), virgülle listelenebilir, iç içe kullanılabilir ve kendi `@custom-variant`s öğenizin adını içerebilir. Üst düzey bir `@variant` gövdesizse veya `@slot` içeriyorsa geriye dönük uyumluluk için `@custom-variant` olarak değerlendirilir.

## `@custom-variant`

`@custom-variant`, herhangi bir yardımcı sınıfın önüne ekleyebileceğiniz yeni bir varyant tanımlar. Kısa biçim varyantı adlandırır ve parantez içinde bir seçici veya at-rule verir.

Seçici listesi varyantında öğe için `&` kullanılır:

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

`hocus:bg-blue-500` daha sonra hem `:hover` hem de `:focus` kurallarını üretir. Öznitelik biçimi de aynı şekilde çalışır:

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

Bir at-rule varyantı, eşleşen yardımcı sınıfları bu at-rule içine alır:

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

Özel varyantlar yerleşik varyantlarla birleştirilebilir: `sm:hocus:bg-blue-500`, `hocus` seçicisini `sm` medya sorgusunun içine yerleştirir. Daha karmaşık durumlarda, yardımcı sınıfın bildirimlerinin ekleneceği yeri `@slot` ile belirten blok biçimini kullanın:

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

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

## `@layer`

`@layer`, yerel CSS basamak katmanlarını kullanarak basamak sırasını denetler. Yalın bir `@layer` ifadesi katmanların sırasını bildirir; özgüllükten bağımsız olarak sonraki katmanlar önceliklidir. Tailwind için kanonik sıra şöyledir:

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

`@import "tailwindcss"`, sistem içinde tam olarak bunu ayarlar. Kendi sıralamanızı bildirebilir veya bunu birden fazla ifadeye bölebilirsiniz (önce `@layer reset, base;`, ardından `@layer components, utilities;`) ve bir blokla kuralları adlandırılmış bir katmana atayabilirsiniz:

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

Temel stilleri `@layer base` ile eklemek onları `components` ve `utilities` katmanlarının altında tutar; böylece bir yardımcı sınıf, öğenizin varsayılan stillerini her zaman geçersiz kılar. Aynı durum, yardımcı sınıfların altında kalması gereken bileşen sınıflarına yönelik `@layer components { … }` için de geçerlidir. Anonim katmanlar ve `@import` üzerindeki `layer()` değiştiricileri [İçe Aktarımlar](https://tailwindphp.inline0.dev/tr/docs/usage/imports) bölümünde ele alınır.

## Sonraki adımlar

- [Tema](https://tailwindphp.inline0.dev/tr/docs/usage/theme) — `@theme` belirteçleri ve tema işlevleri.
- [İçe Aktarımlar](https://tailwindphp.inline0.dev/tr/docs/usage/imports) — `@import`, sanal modüller ve `layer()` değiştiricileri.
- [Eklentiler](https://tailwindphp.inline0.dev/tr/docs/plugins) — `@plugin` yönergesi ve eklenti API.
- [@source](https://tailwindphp.inline0.dev/tr/docs/usage/source) — hangi dosyaların ve sınıfların taranacağını denetleyin.