# Tema ve Özelleştirme

Tailwind teması, CSS değişkenlerinden oluşan düz bir kümedir. Temayı, girdi CSS dosyanızda bir `@theme { … }` bloğuyla genişletir veya değiştirirsiniz; bu değerleri tema işlevleri aracılığıyla CSS içinden kullanır ve çözümlenen değerleri PHP üzerinden okursunuz. CSS içinde bütünüyle yer alan temada eski tip bir JavaScript yapılandırma dosyası yoktur.

## `@theme` bloğu

Bir `@theme` bloğu, tasarım belirteçlerini CSS özel özellikleri olarak tanımlar. Her değişkendeki ad alanı öneki (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`, …), belirtecin hangi yardımcı sınıfları ve varyantları beslediğini Tailwind'e bildirir.

```php
use TailwindPHP\tw;

$css = tw::generate('<div class="bg-brand text-brand xs:flex">', '
    @import "tailwindcss";

    @theme {
        --color-brand: #3b82f6;
        --font-heading: "Inter", sans-serif;
        --breakpoint-xs: 20rem;
        --spacing-huge: 10rem;
    }
');
```

Her belirteç, ad alanı altında yardımcı sınıflar kaydeder. Yukarıdaki örnek `bg-brand`, `text-brand`, `border-brand`, `font-heading` ailesini, bir `xs:` duyarlı varyantı ve `p-huge`/`m-huge` aralıklarını kullanılabilir kılar; bunlar yalnızca sınıf içeriğinizde göründüklerinde oluşturulur.

```css
/* bg-brand resolves to the theme variable */
:root, :host {
  --color-brand: #3b82f6;
}
.bg-brand {
  background-color: var(--color-brand);
}
```

`--breakpoint-xs` belirteci, `xs:` varyantını doğrudan kaydeder:

```css
@media (min-width: 20rem) {
  .xs\:flex {
    display: flex;
  }
}
```

### Yaygın ad alanları

| Ad alanı | Sağladıkları |
|-----------|-------|
| `--color-*` | `bg-*`, `text-*`, `border-*`, `fill-*`, `stroke-*`, … |
| `--font-*` | `font-*` ailesi yardımcı sınıfları |
| `--text-*` | `text-*` yazı tipi boyutu yardımcı sınıfları |
| `--breakpoint-*` | duyarlı varyantlar (`sm:`, `md:`, özel `xs:`) |
| `--spacing-*` | adlandırılmış aralık değerleri (`p-huge`, `m-huge`) |
| `--radius-*` | `rounded-*` yardımcı sınıfları |
| `--shadow-*` | `shadow-*` yardımcı sınıfları |

### Ad alanını temizleme

Bir ad alanı joker karakterini `initial` olarak ayarlamak, kendi belirteçleriniz eklenmeden önce Tailwind için o ad alanındaki varsayılanları kaldırır. Böylece temiz bir paletle başlayabilirsiniz:

```css
@theme {
    /* Drop every default color, then define only what you need */
    --color-*: initial;
    --color-brand: #3b82f6;
    --color-ink: #111827;
}
```

`--*: initial;` tüm temayı temizler. Joker karakter içermeyen bir anahtardaki (`--color-red-500: initial;`) tek bir `initial` değeri yalnızca o belirteci kaldırır. `-*` joker karakteri için değer olarak yalnızca `initial` kabul edilir; başka bir değer hata verir.

## CSS içinde tema değerlerini okuma

### `theme()`

Eski `theme()` işlevi, v3 tarzı ad alanlarında nokta gösterimiyle bir değer okur. Derleme zamanında belirtecin değerine çözümlenir; bu nedenle özel kurallar ve diğer bildirimler dahil, değer beklenen her yerde kullanılabilir.

```php
$css = tw::generate('<div class="callout">', '
    @import "tailwindcss";
    .callout { color: theme(colors.red.500); }
');
```

```css
.callout {
  color: oklch(63.7% .237 25.331);
}
```

Nokta yolları temel değişkenlerle eşleşir (`colors.red.500` → `--color-red-500`, `fontFamily.sans` → sans ailesi). Opaklık değiştiricisi desteklenir: `theme(colors.red.500 / 50%)`. İkinci bağımsız değişken olarak yedek değer verilebilir: `theme(colors.brand, #000)`. Bir yol çözümlenemez ve yedek değer verilmezse, onu kullanan aday kaldırılır.

### `--theme()`

`--theme()`, bir tema değişkenini CSS özel özellik adıyla okur ve varsayılan olarak bir `var()` başvurusu döndürür; böylece değer çalışma zamanında değiştirilebilir kalır:

```css
.btn { color: --theme(--color-brand); }
/* → color: var(--color-brand); */
```

`var()` başvurusu yerine çözümlenmiş değeri kullanmak için `inline` ekleyin: `--theme(--color-brand inline)`. İkinci bağımsız değişken yedek değerdir (`--theme(--color-brand, #000)`); bir `initial` yedek değeri özel olarak ele alınır ve kendileri `initial` olarak çözümlenen iç içe `var()` başvurularına eklenir. Bir at-kuralının (`@media`, `@container`) içinde `--theme()` her zaman satır içinde çözümlenir; çünkü `var()` bu önsözlerde geçerli değildir.

### `--spacing()`

`--spacing(n)`, temanın temel aralık birimini (`--spacing`) `n` ile çarpar:

```css
@utility my-gap { gap: --spacing(4); }
/* → gap: calc(var(--spacing) * 4); */
```

`1` çarpanı, temel değişkenin kendisine çözümlenir (`--spacing(1)` → `var(--spacing)`; `p-1` de bunu üretir); `0` ise yalın sıfır uzunluğa çözümlenir.

Yerleşik aralık yardımcı sınıfları da aynı hesaplamayı kullanır; bu nedenle özel değerler `p-4`, `m-4` ve benzerleriyle tutarlı kalır.

### `--alpha()`

`--alpha(color / opacity)`, oklab renk uzayında bir `color-mix()` kullanarak renge opaklık uygular:

```css
@utility tint { color: --alpha(var(--color-red-500) / 50%); }
```

```css
.tint {
  color: #fb2c3680;
}
@supports (color: color-mix(in lab, red, red)) {
  .tint {
    color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
  }
}
```

`color-mix()` biçimi çalışma zamanında değiştirilebilir kalır; öncesindeki, tema değerinden hesaplanan statik yedek, `color-mix()` desteklemeyen tarayıcıları kapsar. Yedeği `polyfills` seçeneğiyle kapatın: [`tw::compile()`](https://tailwindphp.inline0.dev/tr/docs/api#twcompile).

### Opaklık ve `color-mix()` → `oklab()` birleştirme

Opaklık değiştiricileri birleşir. Zaten %50 opaklık taşıyan bir değere %50 uygulandığında, oklab'da hesaplanan %25 elde edilir. Bir opaklık değiştiricisi statik bir renge uygulandığında TailwindPHP, `color-mix(in oklab, …)` ifadesini somut bir `oklab()` değerine indirger; bu, yukarı akıştaki Tailwind araç zincirinde lightningcss'in yaptığı dönüşümle aynıdır. Hâlâ `var()` içinde sarılı olan dinamik renkler, çalışma zamanında değiştirilebilir kalmaları için `color-mix()` biçimini korur.

## PHP üzerinden tema değerlerini okuma

Üç erişimci, çözümlenmiş tema değerlerini PHP dizileri olarak döndürür. Her biri isteğe bağlı bir girdi CSS dizgesi alır (varsayılan `@import "tailwindcss";`) ve ayrıca bir [ compiler örneğinde de kullanılabilir](https://tailwindphp.inline0.dev/tr/docs/api).

```php
use TailwindPHP\tw;

tw::colors();
// ['red-500' => 'oklch(63.7% .237 25.331)', 'blue-500' => 'oklch(62.3% .214 259.815)', ...]

tw::breakpoints();
// ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem']

tw::spacing('@import "tailwindcss"; @theme { --spacing-huge: 10rem; }');
// ['huge' => '10rem']
```

Özelleştirilmiş bir temayı okumak için CSS dizgesi verin:

```php
tw::colors('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// [..., 'brand' => '#3b82f6']

tw::breakpoints('@import "tailwindcss"; @theme { --breakpoint-xs: 20rem; }');
// ['sm' => '40rem', ..., '2xl' => '96rem', 'xs' => '20rem']
```

TailwindCSS 4, `--spacing-*` ölçeği yerine tek bir `--spacing` temel değer kullanır; bu nedenle `tw::spacing()` yalnızca tanımladığınız özel `--spacing-*` belirteçlerini döndürür. Bir compiler örneğinde de aynı yöntemler vardır: `$compiler->colors()`, `$compiler->breakpoints()`, `$compiler->spacing()`. İmza ayrıntıları için [ başvuru belgesineAPI bakın](https://tailwindphp.inline0.dev/tr/docs/api).

## Sonraki adımlar

- [Yönergeler](https://tailwindphp.inline0.dev/tr/docs/usage/directives) — `@apply`, `@utility`, `@custom-variant`, `@layer`.
- [İçe aktarımlar](https://tailwindphp.inline0.dev/tr/docs/usage/imports) — `@import`, sanal modüller ve Preflight.
- [API](https://tailwindphp.inline0.dev/tr/docs/api) — tüm erişimciler ve inceleme yöntemleri.