Stil ve Tailwind CSS

Temanızın CSS'ini üç yoldan verebilirsiniz. Hangisini seçtiğiniz, stilin üretime çıkıp çıkmadığını belirler — bu sayfadaki en önemli ayrım budur.

Tailwind CSS

Yeni projeler Tailwind ile gelir. Bölümlerinizde doğrudan sınıf yazarsınız:

export default function Hero({ title }: HeroProps) {
  return (
    <section className="flex min-h-[60vh] items-center justify-center bg-neutral-900">
      <h1 className="text-4xl font-semibold text-white md:text-6xl">{title}</h1>
    </section>
  );
}

Kurulum gerekmez; proje şablonunda hazırdır.

Nasıl çalışıyor

Ortam	Ne olur
npm run dev	Vite eklentisi src/tailwind.css'i işler, anında görürsünüz
deploy	Kaynak olduğu gibi yüklenir
Derleme	Sunucu Tailwind'i genişletir, sınıfları kaynağınızdan tarar
Vitrin	CSS pakete gömülüdür, bölümlerinizle birlikte yüklenir

Genişletme sunucuda yapılır — platformun genel kuralıyla aynı: siz kaynak yüklersiniz, derleme bizde olur. Bunun pratik faydası, CLI sürümünüzün sonucu etkilememesi.

Derleme çıktısında şunu görürsünüz:

   Tailwind genişletildi (18.4 KB CSS).
   Tema CSS'i pakete gömüldü (18.4 KB).

Sınıf taraması

Tailwind yalnızca kaynakta gördüğü sınıfları çıktıya koyar. Taranan yerler src/tailwind.css içinde tanımlıdır:

@source "./sections/**/*.{ts,tsx,js,jsx}";
@source "./lib/**/*.{ts,tsx,js,jsx}";

Başka bir klasörde sınıf kullanacaksanız buraya ekleyin.

Sınıf adını parça parça kurmayın

<div className={`text-${color}-500`} />   // ✗ Tailwind bunu göremez
<div className={color === 'red' ? 'text-red-500' : 'text-blue-500'} />  // ✓

Tarayıcı kaynağı metin olarak okur; çalışma anında birleşen adları bilemez.

Mağaza ayarlarına bağlanma

Mağaza sahibinin panelden seçtiği renk ve tipografi --wk-* CSS değişkenleri olarak gelir. Bunları Tailwind'in kendi ölçeğine bağlayabilirsiniz:

@theme {
  --color-brand: var(--wk-color-primary);
  --font-display: var(--wk-font-heading);
}

Artık bg-brand ve font-display sınıfları mağazanın ayarlarına uyar. Bu, Tailwind kullanırken bile temanızın mağaza sahibinin seçimlerine saygı göstermesini sağlar.

Tailwind istemiyorsanız

src/tailwind.css dosyasını silin. Dosyanın varlığı tercihtir: yoksa pull registry'ye import eklemez, sunucudaki genişletme adımı hiç çalışmaz ve paket eskisi gibi üretilir. Geri dönmek isterseniz dosyayı koyup pull çalıştırın.

Düz CSS dosyası

Tailwind'e ihtiyacınız yoksa da CSS dosyası yazabilirsiniz. Üretime çıkması için import zincirine bağlı olması gerekir:

/* src/tailwind.css */
@import "tailwindcss";
@import "./benim-stilim.css";

src/styles.css üretime çıkmaz

Proje şablonundaki src/styles.css yalnızca src/dev.tsx tarafından içe aktarılır — yani sadece yerel önizlemede uygulanır. Vitrin paketi dev.tsx'i hiç görmez.

Yerelde çalışıp canlıda çalışmayan stillerin sebebi neredeyse her zaman budur. Üretime çıkmasını istediğiniz CSS'i src/tailwind.css üzerinden zincire bağlayın ya da bölüm dosyanızdan içe aktarın.

Bileşen içi stil

Küçük ve bölüme özel stiller için <style> etiketi de kullanılabilir:

export default function Hero() {
  return (
    <>
      <style>{`.tema-hero { display: grid; }`}</style>
      <section className="tema-hero">…</section>
    </>
  );
}

Referans tema Vitrin bu yolu kullanır (src/lib/ui.tsx içindeki BASE_CSS). Tailwind'den önce tek seçenek buydu; hâlâ çalışır ve bozulmadı.

Sınıf adı çakışması

Aynı mağazada iki tema aynı anda yüklü olmaz, ama temanızın sınıfları vitrinin kendi stilleriyle aynı sayfada yaşar. Düz CSS yazarken sınıflarınıza temanıza özel bir önek koyun:

.vitrin-hero { }   /* ✓ */
.hero { }          /* ✗ çakışabilir */

Tailwind sınıfları için bu sorun yoktur; yardımcı sınıflar zaten paylaşılan bir sözlüktür.

Eski temalar

Bu değişiklik geriye dönük uyumludur. src/tailwind.css dosyası olmayan bir temada:

• registry'ye import satırı eklenmez,
• deploy'da Tailwind adımı çalışmaz,
• derleme CSS çıktısı üretmez, paket birebir eskisi gibi kalır.

Var olan temanıza Tailwind eklemek için: şablondaki src/tailwind.css dosyasını projenize kopyalayın, package.json'a tailwindcss, @tailwindcss/vite ve @tailwindcss/cli paketlerini ekleyin, vite.config.ts'e eklentiyi tanıtın ve pull çalıştırın.