# İçe Aktarımlar ve Sanal Modüller

TailwindPHP, derlemeden önce `@import` kurallarını çözümler. İçe aktarımlar yerleşik sanal modüllere (`tailwindcss` ve benzerleri), `importPaths` seçeneği aracılığıyla diskteki dosyalara veya özel bir çözümleyiciden döndürdüğünüz herhangi bir şeye işaret edebilir.

## Sanal modüller

`@import "tailwindcss"` çoğu projenin kullandığı giriş noktasıdır. Aşağıdaki dört satıra genişler: katman sırası bildirimi ve her biri kendi basamak katmanına atanmış üç alt içe aktarma:

```css
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);
```

Her alt içe aktarma, tek başına içe aktarabileceğiniz bir sanal modüldür. Kullanılabilir sanal modüller şunlardır:

| Modül | İçerik |
|--------|----------|
| `tailwindcss` | Tam paket: tema + Preflight + yardımcı sınıflar. |
| `tailwindcss/theme.css` | Yalnızca tema değişkenleri (renkler, temel aralıklar, kesme noktaları vb.). |
| `tailwindcss/preflight.css` | Preflight temel sıfırlaması. |
| `tailwindcss/utilities.css` | Yardımcı sınıflar katmanı. |
| `tw-animate-css` | `tw-animate-css` animasyon yardımcı sınıfları. |

Parçaları ayrı ayrı içe aktarmak Preflight'ı atlamanıza veya katmanların sırasını değiştirmenize olanak tanır (aşağıya bakın).

## tw-animate-css ile animasyonlar

[tw-animate-css](https://github.com/Wombosvideo/tw-animate-css), TailwindCSS v4 animasyon kitaplığıdır; `tailwindcss-animate` için doğrudan kullanılabilen bir alternatiftir. Yerleşik bir sanal modül olarak gelir; bu nedenle yardımcı sınıflar katmanıyla birlikte içe aktarıldığında giriş ve çıkış animasyonu sınıfları diğer yardımcı sınıflar gibi derlenir:

```css
@import "tw-animate-css";
@import "tailwindcss/utilities.css";
```

Animasyon yardımcı sınıfları şunları kapsar:

- **Giriş / çıkış** — `animate-in`, `animate-out`
- **Solma** — `fade-in`, `fade-out`
- **Yakınlaştırma** — `zoom-in`, `zoom-out`
- **Döndürme** — `spin-in`, `spin-out`
- **Bulanıklık** — `blur-in`, `blur-out`
- **Kaydırma** — `slide-in-from-top` / `-bottom` / `-left` / `-right` ve karşılık gelen `slide-out-to-*`; ayrıca RTL uyumlu `-start` / `-end`
- **Zamanlama** — `duration-*`, `delay-*`, `repeat-1` / `repeat-infinite`, `direction-normal` / `-reverse` / `-alternate` ve `fill-mode-none` / `-forwards` / `-backwards` / `-both`
- **Oynatma durumu** — `running`, `paused`
- **Bileşen animasyonları** — `accordion-down` / `accordion-up`, `collapsible-down` / `collapsible-up` ve `caret-blink`

Bu sınıflar, diğer yardımcı sınıflar gibi Tailwind varyantlarıyla birlikte kullanılabilir; bu da onları shadcn/ui iletişim kutusu ve açılır menü düzenleri için doğrudan kullanıma uygun hâle getirir.

## `importPaths` seçeneği

`@import` öğesini dosya sistemine göre çözümlemek için `generate()` öğesinin dizi biçiminde `importPaths` seçeneğini iletin. Tek bir yolu, dizini veya bunlardan oluşan bir diziyi kabul eder.

```php
use TailwindPHP\tw;

// Single file
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/styles.css',
]);

// Directory (loads all .css files alphabetically)
$css = tw::generate([
    'content'     => '<div class="flex btn">Hello</div>',
    'importPaths' => '/path/to/css/',
]);

// Multiple paths — files and directories
$css = tw::generate([
    'content'     => '<div class="flex btn card">Hello</div>',
    'importPaths' => [
        '/path/to/base.css',
        '/path/to/components/',
    ],
]);

// Combine with inline css
$css = tw::generate([
    'content'     => '<div class="flex btn custom">Hello</div>',
    'css'         => '.custom { color: red; }',
    'importPaths' => '/path/to/styles.css',
]);
```

### İç içe içe aktarımlar

Yüklenen bir dosyanın içindeki içe aktarımlar, o dosyaya göre çözümlenir. `/path/to/styles.css`, `@import "./components/buttons.css"` içeriyorsa yol, `/path/to/` konumuna göre çözümlenir:

```css
/* /path/to/styles.css */
@import "tailwindcss";
@import "./components/buttons.css";
@import "./components/cards.css";

@theme {
    --color-brand: #3b82f6;
}
```

### Yinelenenleri kaldırma

Aynı dosya veya sanal modül birden fazla kez içe aktarılırsa ilkinden sonraki içe aktarımlar etkisiz olur: yinelenen `@import "tailwindcss"` satırları veya aynı parçayı içe aktaran iki dosya otomatik olarak yinelenenlerden arındırılır. Bu, döngüsel içe aktarımları da önler.

## Özel çözümleyici

Sanal dosya sistemleri, veritabanları veya dosya sistemi dışındaki kaynaklar için `importPaths` olarak çağrılabilir bir işlev iletin. İşlev, içe aktarma URI'sini ve içe aktarmanın çözümleneceği temel dizini alır, ardından CSS veya `null` döndürür:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content'     => '<div class="flex virtual-class">Hello</div>',
    'importPaths' => function (?string $uri, ?string $fromFile): ?string {
        if ($uri === null) {
            // Entry CSS — returned when no file is supplied
            return '@import "tailwindcss"; @import "custom.css";';
        }
        if ($uri === 'custom.css') {
            return '.virtual-class { color: purple; }';
        }
        return null; // Unknown imports are silently skipped
    },
]);
```

`$uri` `null` olduğunda (ilk çağrıda, ikinci argüman da `null` iken) giriş CSS öğesini döndürün. Diğer tüm URI'ler için ilgili CSS içeriğini döndürün veya dosya sistemi aramasına geçmek için `null` döndürün. Aramada hiçbir şey bulunamazsa içe aktarma sessizce atlanır.

## Preflight

Preflight, Tailwind tarafından belirlenen ve [modern-normalize](https://github.com/sindresorhus/modern-normalize) üzerine kurulu temel sıfırlamadır. Tarayıcılar arası tutarsızlıkları gidererek yardımcı sınıfların öngörülebilir davranmasını sağlar. Diğer özelliklerinin yanı sıra varsayılan kenar boşluklarını kaldırır, başlıkların ve listelerin biçimlendirmesini sıfırlar, görüntüleri blok düzeyine dönüştürür, yalnızca `border-width` kenarlık çizecek şekilde kenarlık stillerini sıfırlar ve düğmelerin yazı tiplerini üst devralmasını sağlar.

Preflight, `@import "tailwindcss"` içinde gelir; tam paketi içe aktarırsanız zaten kullanılabilir durumdadır:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '@import "tailwindcss";',
]);
```

### Preflight'ı genişletme

Preflight'ın üzerine kendi temel stillerinizi `@layer base` ile ekleyin:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<article><h1>Title</h1><p>Content</p></article>',
    'css'     => '
        @import "tailwindcss";
        @layer base {
            h1 { font-size: var(--text-2xl); }
            h2 { font-size: var(--text-xl); }
            a  { color: var(--color-blue-600); text-decoration-line: underline; }
        }
    ',
]);
```

### Preflight'ı devre dışı bırakma

Mevcut bir projeye entegre ederken yalnızca ihtiyacınız olan parçaları içe aktarın ve Preflight satırını atlayın:

```php
use TailwindPHP\tw;

$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'css'     => '
        @layer theme, base, components, utilities;
        @import "tailwindcss/theme.css" layer(theme);
        @import "tailwindcss/utilities.css" layer(utilities);
    ',
]);
```

## İçe aktarma değiştiricileri

Tailwind dosyalarını ayrı ayrı içe aktarırken değiştiricileri etkiledikleri içe aktarımlara ekleyin:

```css
/* Assign the import to a cascade layer */
@import "tailwindcss/utilities.css" layer(utilities);

/* prefix affects both theme variables and utilities */
@import "tailwindcss/theme.css" layer(theme) prefix(tw);
@import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

/* important affects utilities */
@import "tailwindcss/utilities.css" layer(utilities) important;

/* theme(static) or theme(inline) affects theme variables */
@import "tailwindcss/theme.css" layer(theme) theme(static);

/* theme(reference): utilities use the variables with a fallback, no :root block */
@import "tailwindcss/theme.css" layer(theme) theme(reference);
```

## Başvuru içe aktarımları

`@import "…" reference` bir dosyayı yalnızca tanımları için yükler: içindeki `@theme` değerleri, `@utility` ve `@custom-variant` tanımları kullanılabilir, ancak dosya kendi başına CSS üretmez. Bu, dosyanın içeriğini `@media reference { … }` içine almaya eşdeğerdir; bunu doğrudan da yazabilirsiniz:

```css
@import "tailwindcss/utilities.css";

@media reference {
    @theme {
        --color-brand: #f00;
    }
}
```

`bg-brand` daha sonra `background-color: var(--color-brand, #f00);` olarak derlenir ve hiçbir `--color-brand` bildirimi üretilmez.

Mevcut sürümdeki ([#14](https://github.com/inline0/tailwindphp/issues/14)) iki kısıtlama:

- Başvuru içe aktarımlarını ve `@media reference` bloklarını, `tailwindcss` veya `tailwindcss/utilities.css` öğesinin `@import` ifadesinden **sonra** yerleştirin. Öncesine koyarsanız çıktının tamamı boş döner.
- Yerleşik sanal modüllerde (`@import "tailwindcss" reference;`) `reference` henüz etkisizdir: tema, Preflight ve yardımcı sınıflar yine de üretilir.

Tema değişkenleri için [Tema](https://tailwindphp.inline0.dev/tr/docs/usage/theme) ile veya hangi dosyaların sınıf adları için taranacağını denetlemek üzere [@source](https://tailwindphp.inline0.dev/tr/docs/usage/source) ile devam edin.