---
title: "Tailwind'den Uzaklaşmak ve CSS Yapılandırmayı Öğrenmek"
url: https://blog.edumints.com/tailwindden-uzaklasmak-ve-css-yapilandirmayi-ogrenmek-upy9goi5
category: "Web"
date: 2026-05-16T22:58:55.250Z
publisher: Edumints Blog
lang: tr-TR
source_name: "Hacker News"
source_url: https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/
---

# Tailwind'den Uzaklaşmak ve CSS Yapılandırmayı Öğrenmek

Julia Evans, son blog yazısında yıllardır kullandığı Tailwind CSS framework'ünden neden vazgeçtiğini ve kendi CSS yapısını nasıl kurduğunu detaylandırıyor. Tailwind'in sunduğu kolaylıklardan çok, native CSS'in modern gücüne odaklanan Evans, daha sürdürülebilir bir web geliştirme süreci için dokuz adımlı bir yapı öneriyor.

**Neden Tailwind'den Vazgeçtim?**

Evans'ın bu geçişi yapmasındaki temel motivasyonlar şunlar:
- **Derleme Sistemi Bağımlılığı:** Tailwind'in düzgün çalışması için gereken karmaşık derleme süreçlerinden kurtulmak.
- **Dosya Boyutu:** Optimize edilmemiş Tailwind dosyalarının 2.8MB gibi devasa boyutlara ulaşabilmesi.
- **HTML Okunabilirliği:** "Utility-first" yaklaşımının HTML içinde yarattığı karmaşa (div soup) ve bakım zorluğu.
- **Temel Yetenekler:** Modern CSS özelliklerinin (Grid, Flexbox, Variables) artık birçok framework'e olan ihtiyacı ortadan kaldırması.

**Yeni CSS Organizasyon Sistemi**

Evans, Tailwind'den öğrendiği yapısal mantığı kaybetmeden, kendi vanilla CSS sistemini dokuz ana başlıkta topluyor:

1. **Reset (Sıfırlama):** Tarayıcılar arasındaki stil farklarını gidermek için Tailwind’in "Preflight" özelliğine benzer, minimal bir sıfırlama dosyası kullanıyor.
2. **Components (Bileşenler):** Her bileşen (buton, kart, menü) için ayrı ve kapsamlı (scoped) CSS dosyaları oluşturarak modülerliği sağlıyor.
3. **Colors (Renkler):** Tüm renk paletini CSS değişkenleri (`--color-primary` gibi) üzerinden tanımlayarak merkezi bir yönetim kuruyor.
4. **Font Sizes (Yazı Boyutları):** Tailwind'in `text-sm`, `text-lg` gibi tanıdık isimlendirme kurallarını takip eden standart bir yazı ölçeği oluşturuyor.
5. **Utilities (Yardımcı Sınıflar):** Sadece gerçekten ihtiyaç duyulan, az sayıda ve basit yardımcı sınıflar (örneğin `.hidden` veya `.text-center`) tanımlıyor.
6. **The Base (Temel):** `body`, `h1`, `p` gibi temel HTML etiketleri için global ve minimal stiller belirliyor.
7. **Spacing (Boşluklar):** Elemanlar arasındaki boşlukları yönetmek için "lobotomized owl" (`* + *`) seçicisi gibi akıllı tekniklerden yararlanıyor.
8. **Responsive Design (Duyarlı Tasarım):** Sayısız medya sorgusu yazmak yerine, CSS Grid ve `auto-fit` özelliklerini kullanarak kendiliğinden duyarlı (responsive) düzenler kuruyor.
9. **Build System (Derleme Sistemi):** Üretim aşamasında dosyaları birleştirmek ve küçültmek için karmaşık araçlar yerine `esbuild` gibi hızlı ve basit çözümleri tercih ediyor.

Bu yaklaşım, modern CSS özelliklerinin (CSS Layers, Scope, Container Queries) yaygınlaşmasıyla birlikte, geliştiricilerin framework bağımlılığından kurtularak daha temiz ve performanslı web siteleri inşa edebileceğini kanıtlıyor.

[Orijinal kaynağa buradan ulaşabilirsiniz.](https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/)

---

**Kaynak:** [Hacker News](https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/)
**Yayıncı:** [Edumints Blog](https://blog.edumints.com) · Alıntılarken bu URL'ye bağlantı verin: https://blog.edumints.com/tailwindden-uzaklasmak-ve-css-yapilandirmayi-ogrenmek-upy9goi5