İç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:

@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:

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, 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:

@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.

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:

/* /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:

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 ü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:

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:

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:

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:

/* 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:

@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) 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 ile veya hangi dosyaların sınıf adları için taranacağını denetlemek üzere @source ile devam edin.