Tailwind
T-SOFT temaları, sabit bir Tailwind CSS kurulumuyla derlenir. Geliştirici olarak yapı taşı utility class'larını doğrudan Twig dosyalarında kullanırsınız; mağaza panelinden gelen renkler ve fontlar ise hazır semantik class'lar (bg-primary, text-body, font-sans…) olarak sunulur.
<button class="px-6 py-3 rounded-custom
bg-primary
text-white font-medium
hover:opacity-90 transition">
{{ t.add_to_cart }}
</button>
Kısıtlar
tailwind.config.js dosyasına dokunamazsınız. T-SOFT, tüm temalar için tek bir Tailwind kurulumu kullanır. Tema bazında yeni theme, plugin, safelist veya content tanımlanamaz.Bu, üç pratik sonucu doğurur:
| Sınır | Anlamı |
|---|---|
| Plugin ekleyemezsiniz | @tailwindcss/forms, @tailwindcss/typography gibi paketler, T-SOFT'un dahil ettiği setle sınırlıdır. |
| Yeni utility class ilan edemezsiniz | Panel renkleri/fontları için bg-primary, text-body, font-secondary, rounded-custom, rounded-form, h-form gibi semantik class'lar zaten hazırdır. Bunların dışında özel bir isim gerekiyorsa theme.css içinde @layer components kullanın. |
| Content path'i geniştir | Tema motoru tüm Twig dosyalarını tarar — class'lar normal kullanımda otomatik dahil olur. |
Panel renkleriyle entegrasyon
Mağaza paneli 6 renk ve 3 font kontrol eder. Bunlar Tailwind kurulumuna hazır semantik class olarak aktarılır (renkler ayrıca :root üzerinde --primary, --body… CSS değişkeni olarak da bulunur).
| Panel ayarı | Tailwind class |
|---|---|
| Body Text | text-body |
| Primary | bg-primary |
| Secondary | bg-secondary |
| Dark | bg-dark |
| Light | bg-light |
| Form | border-form |
| Font (Primary) | font-sans |
| Secondary Font | font-secondary |
| RTL Font | font-rtl |
Renkler bg-, text-, border- ön ekleriyle, skala (bg-primary-100) ve opaklık (bg-primary/10) ile kullanılabilir:
<div class="bg-light text-body">
<h1 class="text-primary font-sans">
{{ t.welcome }}
</h1>
</div>
theme.css ile genişletme
Tekrarlayan utility kalıplarını assets/css/theme.css içinde @layer components katmanına taşıyarak isimlendirin:
@layer components {
.btn-primary {
@apply px-6 py-3 rounded-custom font-medium transition
bg-primary text-white
hover:opacity-90;
}
.btn-secondary {
@apply px-6 py-3 rounded-custom font-medium transition
bg-secondary text-white
hover:opacity-90;
}
.card {
@apply p-4 rounded-custom shadow-sm bg-white;
}
}
Twig içinde:
<button class="btn-primary">{{ t.add_to_cart }}</button>
<article class="card">…</article>
@apply ile sadece kendi sınıflarınızı tanımlayın.@layer utilities içinde yeni utility ilan etmeyin — Tailwind'in core utility'leriyle çakışma riski vardır.Responsive ve dark mode
Standart Tailwind breakpoint'leri çalışır:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
…
</div>
| Breakpoint | Genişlik |
|---|---|
sm: | ≥ 640px |
md: | ≥ 768px |
lg: | ≥ 1024px |
xl: | ≥ 1280px |
2xl: | ≥ 1440px |
Dark mode için dark: prefix'i semantik renk class'ları ile birlikte çalışır:
<div class="bg-light dark:bg-dark">
Dinamik class güvenliği
Tailwind, kullanılan class'ları statik tarayarak bulur. Bu yüzden tam class adını çalışma zamanında üretirseniz derleme sırasında ilgili stil üretilmeyebilir:
{# ❌ Çalışmaz — string interpolation sonucu Tailwind'in göremediği bir class üretir #}
<div class="bg-{{ section.settings.tone }}-500">
{# ✅ Çalışır — tüm olası class'lar kaynakta yazıyor #}
{% if section.settings.tone == 'primary' %}
<div class="bg-primary">
{% else %}
<div class="bg-secondary">
{% endif %}
En iyi uygulamalar
Semantik renk class'ıyla çalış
bg-primary — mağaza sahibi panelden temayı değiştirince otomatik yansır.Tekrarlayan kalıbı `@apply`'a al
theme.css içinde bir component class'ı oluşturun.Mobile-first yaz
md:/lg: ile genişletin.