TAILWIND CSS EĞİTİMİ
Geleneksel yaklaşımda 200 component'lik proje 6000 satır custom CSS biriktirir; aynı buton üç dosyada üç farklı renkle yazılır, kimse hangisinin doğru olduğunu bilmez. Utility-first yaklaşım bu birikimi tasarım token'ları üzerine inşa edilen disipline çevirir — stil kararı tek bir config'te toplanır, koddan kopuk kalmaz.
Utility-first felsefe, design token sistemi (theme, color, spacing, typography), responsive ve state modifier'lar, component composition (apply ve hesap kuralı), JIT compiler, dark mode, custom plugin ve preset, headless UI framework entegrasyonları ele alınır. Resmi başvuru için Tailwind CSS Documentation birincil kaynaktır.
Katılımcı Profili
Tailwind CSS ile utility-first arayüz geliştiren profillere yöneliktir:
- Front-end Geliştiriciler: Hızlı UI development ve rapid prototyping yapar
- React, Vue ve Svelte Geliştiricileri: Component'lar için utility approach uygular
- UI Engineer'lar: Design system ve shadcn/ui entegrasyonu kurar
- Freelance Geliştiriciler: Client work ve MVP teslim eder
- Indie Hacker ve Bootstrapped Founder'lar: Solo startup MVP geliştirir
Ön Gereklilikler
Eğitime hazır gelmek için aşağıdaki temellere sahip olmak beklenir:
- HTML yapısı ve semantik etiketlere temel hakimiyet
- CSS seçici, box model ve layout kavramlarına aşinalık
- Komut satırı ile basit proje çalıştırma deneyimi
- VS Code benzeri bir editör kullanma alışkanlığı
- JavaScript okuryazarlığı (örnekleri takip için yeterli)
Süresi ve Tarihi
Süre: 3 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, katılımcı grubunun uygunluğuna göre birlikte planlanır.
Kazanımlar
Program sonunda Tailwind CSS ile arayüz üretiminde ortak bir dil oluşur:
- Utility-first mantığıyla hızlı arayüz üretir
- Responsive kararları sınıf yapısıyla yönetir
- Theme ve config üzerinden marka dilini yaygınlaştırır
- State, varyant ve etkileşim sınıflarıyla tutarlı davranış kurgular
- Komponent bazlı yaklaşımla tekrar kullanımı artırır
- Performans ve derleme çıktısı üzerinden üretim kalitesini iyileştirir
- Gerçek ekran senaryolarında hızlı prototipleme ve revizyon yönetir
- Ortak naming ve kural setiyle bakımı kolaylaştırır
Tailwind CSS Eğitimi Konuları
1. Tailwind Kurulum ve Konfigürasyon
- npm install ve PostCSS kurulumu
- Vite ve Next.js entegrasyonu
- tailwind.config.js içerik (content) path tanımlama
- VS Code Tailwind IntelliSense eklentisi
- Prettier plugin ile sınıf sıralama
2. Utility-First Felsefe
- Utility class vs custom CSS karşılaştırması
- Atomic CSS yaklaşımı
- Sınıf okunabilirliği ve composition
- HTML içinde inline stil kavramı
- Component extraction zamanı
3. Layout: Flex ve Grid Utilities
- flex, flex-row, flex-col
- justify-center, items-center, gap-4
- grid-cols-12 ve responsive grid
- place-items, place-content
- aspect-square, aspect-video
4. Spacing, Sizing ve Container
- p-4, m-2, gap-6 spacing scale
- w-full, h-screen, max-w-7xl
- container class ve breakpoint davranışı
- Negative margin: -mx-4
- space-x ve space-y utility'leri
5. Tipografi: font, leading, tracking
- text-xs ile text-9xl arası ölçek
- font-thin ile font-black ağırlık
- leading-tight, leading-relaxed
- tracking-tight, tracking-wide
- @tailwindcss/typography (prose) eklentisi
6. Renk Sistemi ve Custom Palette
- Default palette: slate, gray, red, blue vb.
- Renk shades: 50, 100, 500, 900
- tailwind.config.js'de custom color tanımlama
- Arbitrary value: bg-[#ff5733]
- oklch ve color-mix ile modern renk
7. Responsive: Breakpoint Prefixes
- sm:, md:, lg:, xl:, 2xl: breakpoint'leri
- Mobile-first yaklaşım
- Custom breakpoint ekleme
- Container query (@container)
- min-h-dvh, h-svh modern viewport units
8. Hover, Focus, Active State Variants
- hover:, focus:, active: variant'ları
- group-hover ve peer-checked
- focus-visible ile keyboard navigasyon
- disabled: ve aria-* variant'ları
- data-* attribute selector'ları
9. Dark Mode Implementation
- dark: variant ve darkMode config
- class strategy vs media strategy
- Theme switcher implementasyonu
- localStorage ile kullanıcı tercihi
- Dark mode renk kontrastı best practice
10. Custom Theme ve tailwind.config.js
- theme.extend ile değer ekleme
- fontFamily, fontSize, spacing customization
- colors ile brand palette
- screens ile breakpoint override
- plugins ile özel utility ekleme
11. @apply ve Component Extraction
- @apply ile reusable component class
- @layer base, components, utilities
- Component vs utility-first dengesi
- React/Vue component'a class taşıma
- clsx ve cn helper kullanımı
12. Plugin Ekosistemi: Typography, Forms, Aspect Ratio
- @tailwindcss/typography (prose)
- @tailwindcss/forms ile input style
- @tailwindcss/aspect-ratio
- @tailwindcss/container-queries
- Custom plugin yazımı
13. JIT Engine ve PurgeCSS
- Just-In-Time compiler avantajları
- Arbitrary value support
- Content scanning ve unused class purge
- Production build optimizasyonu
- Bundle size analizi
14. Headless UI ve shadcn/ui Entegrasyonu
- Headless UI ile accessible component'lar
- Radix UI primitives
- shadcn/ui CLI ve component yükleme
- Tailwind Variants (tv) ile API
- Catalyst, DaisyUI alternatifleri
Tailwind CSS Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Tailwind CSS’te utility-first yaklaşımı pratikte nasıl uygulanır?
Utility sınıflarıyla bileşenleri küçük kararlarla inşa edip, tekrar eden kalıpları tutarlı sınıf setleri ve config üzerinden standardize ederek uygulanır. Eğitimde okunabilirlik, sınıf sıralama ve kompozisyon pratikleriyle bu yaklaşım somutlaştırılır.
Responsive tasarımda breakpoint stratejisini nasıl belirlemeliyiz?
Breakpoint’ler tasarımın kırıldığı gerçek noktalara göre seçilir ve mobil öncelikli bir akışla standartlaştırılır. Eğitimde ekran örnekleri üzerinden, ekip içinde ortak karar seti oluşturma yöntemleri çalışılır.
tailwind.config.js ile tema ve tasarım token’ları nasıl yönetilir?
Renk, tipografi, spacing ve radius gibi değerler theme üzerinden genişletilerek ortak token’lara bağlanır. Böylece arayüz kararları kod içinde dağılmadan, tek noktadan yönetilebilir hale gelir.
@apply ne zaman kullanılmalı ve ne zaman kaçınılmalı?
@apply, tekrar eden ve anlamlı bir bileşen kalıbı oluştuğunda sınıf yönetimini sadeleştirmek için kullanılır. Aşırı kullanımda esnekliği azaltabileceği için, hangi senaryolarda fayda sağladığını eğitimde örneklerle netleştiririz.
Eğitim içeriğini ihtiyaçlarımıza göre özelleştirebilir misiniz?
Evet. Eğitim öncesinde ihtiyaç analizi yaparak içerik ve örnekleri kurumun hedeflerine göre uyarlıyoruz. Modüller eklenebilir, bazı başlıklar derinleştirilebilir veya sadeleştirilebilir.
Eğitim yeri, yöntemi ve sertifikasyon süreci nasıl ilerliyor?
Eğitim online (canlı) veya yerinde gerçekleştirilebilir; tarih ve saatleri katılımcı grubunun uygunluğuna göre planlıyoruz. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
