/* ── Blog Detail Styles ── */ .bd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; padding-top: 28px; } /* ── Article ── */ .bd-article { background: #fff; border-radius: 20px; border: 1px solid rgba(0,0,0,.04); box-shadow: 0 4px 24px rgba(0,0,0,.04); overflow: hidden; } .bd-article__img { width: 100%; max-height: 400px; object-fit: cover; } .bd-article__body { padding: 32px 36px; } .bd-article__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .bd-article__date { font-size: .78rem; font-weight: 600; color: #94a3b8; display: flex; align-items: center; gap: 5px; } .bd-article__date i { color: #027a94; } .bd-article__title { font-size: 1.75rem; font-weight: 800; color: #0a1628; line-height: 1.3; margin: 0 0 24px; letter-spacing: -0.5px; } .bd-article__content { font-size: 1rem; color: #334155; line-height: 1.85; } .bd-article__content p { margin: 0 0 18px; } .bd-article__content img { max-width: 100%; border-radius: 12px; margin: 12px 0; } .bd-article__content a { color: #027a94; font-weight: 600; } .bd-article__content h2, .bd-article__content h3 { color: #0a1628; margin: 28px 0 12px; } .bd-article__content code { background: #f1f5f9; padding: 2px 8px; border-radius: 6px; font-size: .9em; color: #027a94; } .bd-article__content pre { background: #0f172a; color: #e2e8f0; padding: 20px; border-radius: 14px; overflow-x: auto; font-size: .88rem; line-height: 1.7; } .bd-article__content pre code { background: transparent; color: inherit; padding: 0; } .bd-article__content blockquote { border-left: 4px solid #027a94; margin: 16px 0; padding: 12px 20px; background: rgba(2,122,148,.03); border-radius: 0 12px 12px 0; color: #475569; font-style: italic; } .bd-article__content ul, .bd-article__content ol { padding-left: 20px; margin: 0 0 18px; } .bd-article__content li { margin-bottom: 8px; } /* ── Divider ── */ .bd-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%); margin: 32px 0; } /* ── Comments Section ── */ .bd-comments { padding: 0 36px 36px; } .bd-comments__title { font-size: 1.1rem; font-weight: 800; color: #0a1628; display: flex; align-items: center; gap: 8px; margin: 0 0 20px; } .bd-comments__title i { color: #027a94; } .bd-comment { display: flex; gap: 14px; padding: 16px; background: #f8fafc; border-radius: 14px; margin-bottom: 12px; border: 1px solid rgba(0,0,0,.03); } .bd-comment__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #027a94, #01b0c1); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0; } .bd-comment__body { flex: 1; min-width: 0; } .bd-comment__header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .bd-comment__name { font-weight: 700; color: #0a1628; text-decoration: none; font-size: .88rem; } .bd-comment__name:hover { color: #027a94; } .bd-comment__time { font-size: .75rem; color: #94a3b8; } .bd-comment__text { font-size: .88rem; color: #475569; line-height: 1.6; margin: 0; } .bd-comment__empty { text-align: center; padding: 20px; color: #94a3b8; font-size: .88rem; } /* ── Comment Form ── */ .bd-form { padding: 0 36px 36px; } .bd-form__title { font-size: 1.05rem; font-weight: 800; color: #0a1628; display: flex; align-items: center; gap: 8px; margin: 0 0 16px; } .bd-form__title i { color: #027a94; } .bd-form__textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; font-size: .9rem; color: #334155; resize: vertical; min-height: 100px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; font-family: inherit; } .bd-form__textarea:focus { outline: none; border-color: #027a94; box-shadow: 0 0 0 3px rgba(2,122,148,.08); } .bd-form__submit { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 12px 28px; background: linear-gradient(135deg, #027a94, #01b0c1); color: #fff; border: none; border-radius: 12px; font-weight: 700; font-size: .9rem; cursor: pointer; transition: box-shadow .2s; } .bd-form__submit:hover { box-shadow: 0 6px 20px rgba(2,122,148,.3); } .bd-form__login { text-align: center; padding: 16px; color: #64748b; font-size: .88rem; } .bd-form__login a { color: #027a94; font-weight: 700; text-decoration: none; } .bd-form__login a:hover { text-decoration: underline; } /* ── Sidebar ── */ .bd-sidebar { position: sticky; top: 80px; } /* ── Responsive ── */ @media (max-width: 900px) { .bd-layout { grid-template-columns: 1fr; gap: 20px; } .bd-sidebar { position: static; } .bd-article__body { padding: 24px 20px; } .bd-article__title { font-size: 1.35rem; } .bd-comments { padding: 0 20px 24px; } .bd-form { padding: 0 20px 24px; } }
Tailwind (Tailwind CSS) Nedir?

Tailwind (Tailwind CSS) Nedir?

Modern Front-End Geliştiricilerin Vazgeçilmez CSS Yaklaşımı

Son birkaç yıldır front-end dünyasında dikkat ettiysen, “Tailwind” adını mutlaka duymuşsundur. Hatta çoğu geliştirici sohbetinde şu cümle geçer:

“Bir kere alışınca geri dönemiyorsun.”

Peki Tailwind nedir, neden bu kadar popüler oldu ve klasik CSS / Bootstrap yaklaşımından farkı ne?

Bu yazıda, Tailwind’i bir dokümantasyon gibi değil; bizzat kullanan bir geliştirici gözüyle, sade ve net bir şekilde anlatacağım.

Tailwind CSS Nedir?

Tailwind CSS, yardımcı (utility-first) sınıflar üzerine kurulu modern bir CSS framework’üdür.
Yani sana hazır butonlar, kartlar, navbar’lar vermez. Bunun yerine:

  • flex

  • p-4

  • text-center

  • bg-blue-500

  • rounded-lg

gibi küçük ama güçlü yapı taşları sunar.

Bu yapı taşlarını HTML üzerinde birleştirerek arayüzünü sen oluşturursun.

Kısaca:
“CSS yazmadan CSS yazmak.”

Utility-First Yaklaşım Ne Demek?

Klasik CSS’te genelde şöyle ilerleriz:

 
.card { padding: 16px; background-color: white; border-radius: 8px; }

Tailwind’de ise bu kurallar doğrudan HTML’in içine taşınır:

 
<div class="p-4 bg-white rounded-lg">

Başta garip gelebilir.
Ama projeyi büyüttükçe şunu fark ediyorsun:

  • CSS dosyaları şişmiyor

  • Class isimleri düşünmek zorunda kalmıyorsun

  • Tasarım kararları bileşenin yanında duruyor

Tailwind Neden Bu Kadar Popüler?

Tailwind’in bu kadar hızlı yayılmasının birkaç net sebebi var:

1. Aşırı Hızlı Geliştirme

Bir tasarımı Figma’dan alıp birebir HTML’e dökmek inanılmaz hızlı.
Margin, padding, renk, font… Hepsi tek satırda.

2. Responsive Tasarım Çok Kolay

Mobil, tablet, desktop için ayrı CSS yazmana gerek yok:

 
<div class="p-2 md:p-4 lg:p-8">

Bu kadar.

3. Tutarlı Tasarım

Tailwind, tasarım sistemini zorla uygulatır:

  • Belirli spacing değerleri

  • Belirli renk skalaları

  • Tutarlı font boyutları

Bu da “tasarım dağınıklığını” ciddi şekilde azaltır.

4. Özelleştirilebilir (Config Dosyası)

tailwind.config.js sayesinde:

  • Kendi renk paletini

  • Fontlarını

  • Breakpoint’lerini

tanımlayabilirsin. Yani Tailwind seni kısıtlamaz, aksine genişletir.

Tailwind mi Bootstrap mi?

Bu soru hâlâ çok soruluyor, o yüzden net konuşalım.

Bootstrap Tailwind
Hazır bileşenler Utility class’lar
Hızlı prototip Uzun vadeli projeler
“Bootstrap gibi” görünür Tamamen özgün tasarım
CSS override çok CSS neredeyse yok

Eğer:

  • “Hızlı bir admin paneli yapacağım” diyorsan Bootstrap,

  • “Markaya özel, temiz ve modern bir arayüz istiyorum” diyorsan Tailwind.

Gerçek Hayatta Tailwind Nerelerde Kullanılıyor?

Bugün Tailwind kullananlar arasında:

  • Startup’lar

  • SaaS ürünleri

  • Dashboard projeleri

  • Eğitim platformları

  • Kişisel portföy siteleri

hatta arkasında Tailwind Labs olan ekibin geliştirdiği birçok modern ürün var.

Özellikle React, Next.js, Vue, Nuxt gibi framework’lerle birleştiğinde Tailwind ciddi bir hız kazandırıyor.

Dezavantajı Yok mu?

Elbette var, dürüst olalım:

  • HTML class’ları ilk başta kalabalık görünür

  • CSS bilmeden sadece class ezberlemek seni bir noktada kilitler

  • Disiplinli kullanılmazsa okunabilirlik düşebilir

Ama bunların hepsi alışkanlık ve yapı meselesi.

Tailwind Kimler İçin Uygun?

  • Front-end geliştiriciler

  • UI/UX odaklı yazılımcılar

  • React / Vue / Next.js kullananlar

  • “Temiz ve ölçeklenebilir” arayüz isteyen ekipler

Eğer hâlâ klasik CSS yazıyorsan, Tailwind’e bir şans vermeni gerçekten öneririm.

Tailwind Bir Trend mi, Standart mı?

Bana göre Tailwind artık bir “trend” değil.
Modern front-end geliştirme dünyasında yeni bir standart.

İlk gün zor, ilk hafta alışma süreci var.
Ama sonra fark ediyorsun ki:

“Ben neden bunu daha önce kullanmadım?”

Yorumlar

Henüz yorum yapılmamış. İlk yorumu sen yap!