[{"data":1,"prerenderedAt":396},["ShallowReactive",2],{"post-\u002Ftr\u002Fmerhaba-tailwind-css":3},{"page":4,"translation":233,"nav":250,"related":378,"random":385},{"id":5,"title":6,"body":7,"categories":231,"category":233,"date":234,"description":235,"draft":236,"extension":237,"image":238,"kind":233,"lang":67,"meta":239,"navigation":240,"path":241,"readingTime":227,"seo":242,"slug":243,"stem":244,"tags":245,"translationKey":233,"type":232,"updated":248,"__hash__":249},"postsTr\u002Ftr\u002Fmerhaba-tailwind-css.md","Merhaba Tailwind CSS",{"type":8,"value":9,"toc":223},"minimark",[10,46,49,52,55,60,127,129,134,137,154,164,167,174,176,180,183,186,188,192,205,208,210,215],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"Özet (TL;DR):",[22,23,24,31],"ul",{},[25,26,27,30],"li",{},[18,28,29],{},"Nedir:"," Klasik component-based (bileşen tabanlı) framework'lerden (Bootstrap, Bulma vb.) farklı olarak, HTML'den ayrılmadan doğrudan utility-first (işlev öncelikli) sınıflarla tasarım yapmayı sağlayan modern bir CSS kütüphanesidir.",[25,32,33,36,37,41,42,45],{},[18,34,35],{},"Farkı:"," Hazır buton veya kart tasarımları sunmak yerine, ",[38,39,40],"code",{},"bg-blue-500",", ",[38,43,44],{},"font-bold"," gibi temel CSS yapı taşlarını sunarak geliştiriciye tam tasarım özgürlüğü sağlar.",[14,47,48],{},"Bootstrap, Twitter tarafından açık kaynak kodlu olarak yayınlandığında responsive web tasarımlarına büyük bir hız kazandırmış, sonrasında Bootstrap ile yapılmış şablon siteler internetin her köşesinde karşımıza çıkar olmuştu. Bootstrap; frontend geliştirmeye vakit harcamak istemeyen veya uzmanlığı bu olmayan yazılımcıların hızlıca kullanabildikleri hazır bir giysi gibi oldu. Geliştiricilerin adeta kurtarıcı siyah tişörtü haline geldi diyebiliriz.",[14,50,51],{},"Bootstrap'i Foundation, Bulma ve daha birçok CSS framework'ü takip etti. Ben de Foundation'a sadece göz atmakla kalsam da Bulma'yı detaylıca kurcalamıştım. Bu framework'ler daha az CSS ile daha kısa sürede, daha modern tasarımlar yapmamızı sağladıkları için popüler oldular. Peki acaba gerçekten modern ve yenilikçi tasarımın önünü açtılar mı? Bunlarla yapılan siteler bir tasarım harikası mı, yoksa hepimiz aynı şablonları eğip büküp birbirine benzer siteler mi üretiyoruz?",[53,54],"hr",{},[56,57,59],"h3",{"id":58},"bootstrap-vs-tailwind-css-kod-karşılaştırması","Bootstrap vs. Tailwind CSS Kod Karşılaştırması",[61,62,63,80],"table",{},[64,65,66],"thead",{},[67,68,69,74,77],"tr",{},[70,71,73],"th",{"align":72},"left","Özellik \u002F Bileşen",[70,75,76],{"align":72},"Bootstrap Yaklaşımı",[70,78,79],{"align":72},"Tailwind CSS Yaklaşımı",[81,82,83,101,114],"tbody",{},[67,84,85,91,96],{},[86,87,88],"td",{"align":72},[18,89,90],{},"Buton Tanımı",[86,92,93],{"align":72},[38,94,95],{},"\u003Cbutton class=\"btn btn-primary\">",[86,97,98],{"align":72},[38,99,100],{},"\u003Cbutton class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded\">",[67,102,103,108,111],{},[86,104,105],{"align":72},[18,106,107],{},"Tasarım Özgürlüğü",[86,109,110],{"align":72},"Düşük (Varsayılan Bootstrap stilini ezmek\u002Foverride etmek gerekir).",[86,112,113],{"align":72},"Sınırsız (Her bileşen sıfırdan tamamen özelleştirilerek oluşturulur).",[67,115,116,121,124],{},[86,117,118],{"align":72},[18,119,120],{},"Geliştirici Rolü",[86,122,123],{"align":72},"Hazır şablonları hızla prototiplemek için idealdir.",[86,125,126],{"align":72},"Özgün tasarımları piksel kusursuzluğunda kodlamak için idealdir.",[53,128],{},[130,131,133],"h2",{"id":132},"_1-tailwind-css-nedir","1. Tailwind CSS Nedir?",[14,135,136],{},"Tailwind CSS; en temel CSS özelliklerini sıfırdan yazmanızı veya aynı CSS kurallarını tekrar tekrar yazmanızı engelleyen, ön yüz geliştiricilerin işini çok kolaylaştıran ama özgürlüğünü de sınırlandırmayan bir CSS framework'üdür.",[14,138,139,149,150,153],{},[140,141,148],"a",{"href":142,"rel":143,"target":147},"https:\u002F\u002Ftailwindcss.com\u002F",[144,145,146],"nofollow","noopener","noreferrer","_blank","Tailwind CSS resmi sitesinde"," ana sayfada vurgulandığı üzere, HTML kodunuzdan hiç ayrılmadan hızlıca modern web siteleri oluşturabilirsiniz. Tailwind size \"buton\" veya \"tablo\" gibi hazır bileşenler sunmaz, daha alt seviyede faydalı CSS sınıfları (utility classes) sunar. Bir düğmeye ",[38,151,152],{},"btn btn-primary"," sınıflarını atayarak o düğme için şablon bir tasarım kullanmak yerine, temel sınıfları atayarak düğmenizi tamamen kendiniz tasarlarsınız.",[14,155,156,157,159,160,163],{},"Aşağıdaki kod parçasında Bootstrap ",[38,158,152],{}," sınıfı ile yaratılmış bir düğme örneği ve yanında da Tailwind CSS ",[38,161,162],{},"bg-blue-500 hover:bg-purple-dark text-white font-bold py-2 px-4 rounded"," sınıfları ile oluşturulmuş muadilini görüyorsunuz.",[14,165,166],{},"Her ne kadar Tailwind CSS ile HTML içerisinde daha uzun bir sınıf listesi kullanmak zorunda kalsak da (kısaltılabiliyor ama nasıl kısaltılacağına bu giriş yazısında değinmeyeceğim) temel sınıflar kullanarak sıfırdan ve Bootstrap'ten çok daha özgün sonuçlar elde etmemiz mümkündür.",[14,168,169],{},[170,171],"img",{"alt":172,"src":173},"","\u002Fimages\u002Fmerhaba-tailwind-css\u002Fimage-1-1.avif",[53,175],{},[130,177,179],{"id":178},"_2-bootstrap-veya-bulmadan-tailwinde-geçiş-yapmak-zor-mu","2. Bootstrap veya Bulma'dan Tailwind'e Geçiş Yapmak Zor mu?",[14,181,182],{},"Tailwind'in detaylı ve basit dokümanı sayesinde temel sınıflarını öğrenmek ve gerektiğinde el kitabı niyetine hızlıca aratıp bulmak son derece kolaydır. Tailwind'i bir CDN üzerinden veya önceden derlenmiş statik CSS olarak indirip kullanmak isterseniz teknik olarak hiçbir zorluğu yoktur.",[14,184,185],{},"Fakat, projeye özel özelleştirmeler yapmak, kullanmadığınız CSS bölümlerini nihai dosyaya dahil etmemek (Purge\u002FJIT derlemesi) yani ihtiyacınıza göre derlemek isterseniz yapılandırma biraz daha karmaşıklaşacaktır. Bunun nasıl yapılacağı bu temel giriş yazısının kapsamını aşmaktadır.",[53,187],{},[130,189,191],{"id":190},"_3-bundan-sonrası","3. Bundan Sonrası",[14,193,194,195,199,200,204],{},"Gelecekte Tailwind CSS'in ileri seviye kurulum ve kullanımı ile ilgili bir yazı ve örnek kısa kod parçacıkları içeren yazılar paylaşmayı düşünüyorum. ",[140,196,198],{"href":197},"\u002Ftr\u002Ftailwind-css-just-in-time-modu","Tailwind CSS Just in Time modu"," ve ",[140,201,203],{"href":202},"\u002Ftr\u002Ftailwind-css-nerede-kullanilir-tailwind-css-nerede-kullanilmaz","Tailwind CSS nerelerde kullanılır, nerelerde kullanılmaz"," başlıklı yazılarım da yayında.",[14,206,207],{},"Siz de sorularınız ve yorumlarınızla beni yönlendirirseniz memnun olurum.",[53,209],{},[211,212,214],"h5",{"id":213},"bu-yazıda-yapılan-değişiklikler","Bu Yazıda Yapılan Değişiklikler",[22,216,217,220],{},[25,218,219],{},"11.05.2022: Yazı özeti düzenlendi. Tasarımcı kelimesi Ön yüz geliştirici olarak değiştirildi.",[25,221,222],{},"21.06.2026: Türkçe imla kuralları (tişört, doküman, hiçbir, gerektiğinde, birçok, Bootstrap'ten vb.) düzeltildi, marka isimlerinin yazımı standartlaştırıldı. Giriş için TL;DR özet paneli ve Bootstrap karşılaştırma tablosu eklenerek zenginleştirildi.",{"title":172,"searchDepth":224,"depth":224,"links":225},2,[226,228,229,230],{"id":58,"depth":227,"text":59},3,{"id":132,"depth":224,"text":133},{"id":178,"depth":224,"text":179},{"id":190,"depth":224,"text":191},[232],"technical",null,"2020-12-08","Bootstrap ve Bulma gibi geleneksel CSS framework'lerinden farklı olarak utility-first yapısıyla tasarım özgürlüğü sunan Tailwind CSS'e giriş.",false,"md","\u002Fimages\u002Fhero\u002Ftailwind-css.avif",{},true,"\u002Ftr\u002Fmerhaba-tailwind-css",{"title":6,"description":235},"merhaba-tailwind-css","tr\u002Fmerhaba-tailwind-css",[246,247],"css","tailwind-css","2026-06-21","5dsfyHu8AUD1_Ie3UOAOkB3mo2swG5JXkr_oBIuanfQ",{"prev":251,"next":254,"others":257,"lucky":375,"readingTime":227},{"path":252,"title":253},"\u002Ftr\u002Fphp-8-0-yenilikler","Merhaba PHP 8: Modern PHP 8.x Çağı",{"path":255,"title":256},"\u002Ftr\u002Fvue-js-nedir","Vue.js Nedir? Yeni Başlayanlar İçin Rehber",[258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,337,340,343,346,349,352,354,357,360,363,366,369,372],{"path":259,"title":260},"\u002Ftr\u002Fdigital-oceanda-vps-kurulumu","DigitalOcean'da VPS (Droplet) Kurulumu: Adım Adım Rehber",{"path":262,"title":263},"\u002Ftr\u002Fes15-nedir-ecmascript-2024-nedir","ES15 nedir? ECMAScript 2024 nedir?",{"path":265,"title":266},"\u002Ftr\u002Ffull-stack-proje-agaci","Full-Stack Proje Yol Haritası ve İçindekiler",{"path":268,"title":269},"\u002Ftr\u002Fdecorator-tasarim-deseni-nedir","Decorator Tasarım Deseni Nedir?",{"path":271,"title":272},"\u002Ftr\u002Fes14-nedir-ecmascript-2023-nedir","ES14 nedir? ECMAScript 2023 nedir?",{"path":274,"title":275},"\u002Ftr\u002Fyeni-tema-honeywind","Yeni WordPress Temam Honeywind: Tailwind CSS ve Minimalizm",{"path":277,"title":278},"\u002Ftr\u002Frest-api-kimlik-dogrulama-nasil-yapilir","REST API Kimlik Doğrulama Nasıl Yapılır?",{"path":280,"title":281},"\u002Ftr\u002Fwebpack-nedir","Webpack Nedir? Modern JavaScript Paketleyici Ekosistemi",{"path":283,"title":284},"\u002Ftr\u002Fstate-tasarim-deseni-nedir","State Tasarım Deseni Nedir?",{"path":286,"title":287},"\u002Ftr\u002Fdocker-ile-litespeed-enterprise-kurulumu","Docker ile LiteSpeed Enterprise Kurulumu",{"path":289,"title":290},"\u002Ftr\u002Fgoda-iota-nedir-iota-ne-zaman-ve-nerede-kullanilir","Go'da iota Nedir? iota Ne Zaman ve Nerede Kullanılır?",{"path":292,"title":293},"\u002Ftr\u002Fchain-of-responsibility-deseni-nedir","Chain of Responsibility Deseni Nedir?",{"path":295,"title":296},"\u002Ftr\u002Fself-hosted-api-gateway-nasil-kurulur-kapsamli-rehber","Self-Hosted API Gateway Nasıl Kurulur? Kapsamlı Rehber",{"path":298,"title":299},"\u002Ftr\u002Ftasarim-kaliplari-design-patterns-factory-method-nedir","Factory Method Tasarım Deseni Nedir?",{"path":301,"title":302},"\u002Ftr\u002Fdocker-ile-rabbitmq-kurulumu","Docker ile RabbitMQ Kurulumu",{"path":304,"title":305},"\u002Ftr\u002Fgraylog-nedir-docker-ile-nasil-kurulur","Graylog Nedir? Docker Compose ile Adım Adım Kurulum Rehberi",{"path":307,"title":308},"\u002Ftr\u002Fdocker-ile-mongodb-kurulumu","Docker ile MongoDB Kurulumu",{"path":310,"title":311},"\u002Ftr\u002Fwsl-2-kurulumu-6-kolay-adim","WSL 2 Kurulumu - 6 kolay adım",{"path":313,"title":314},"\u002Ftr\u002Fdocker-nedir","Docker Nedir?",{"path":316,"title":317},"\u002Ftr\u002Ftemplate-method-tasarim-deseni-nedir","Template Method Tasarım Deseni Nedir?",{"path":319,"title":320},"\u002Ftr\u002Ffacade-tasarim-deseni-nedir","Facade Tasarım Deseni Nedir?",{"path":322,"title":323},"\u002Ftr\u002Fbuilder-tasarim-deseni-nedir","Builder Tasarım Deseni Nedir?",{"path":325,"title":326},"\u002Ftr\u002Fapi-gateway-nedir","API Gateway Nedir? Ne İşe Yarar?",{"path":328,"title":329},"\u002Ftr\u002Fdocker-ile-mariadb-kurulumu","Docker ile MariaDB Kurulumu",{"path":331,"title":332},"\u002Ftr\u002Ffull-stack-proje-gelistiriyoruz","Full Stack Proje Geliştiriyoruz",{"path":334,"title":335},"\u002Ftr\u002Fes16-nedir-ecmascript-2025-nedir","ES16 nedir? ECMAScript 2025 nedir?",{"path":255,"title":256},{"path":338,"title":339},"\u002Ftr\u002Frabbitmq-nedir","RabbitMQ Nedir?",{"path":341,"title":342},"\u002Ftr\u002Fgarbage-collection-ve-golang","Garbage Collection ve Go (Golang)",{"path":344,"title":345},"\u002Ftr\u002Fphp-ve-makine-ogrenimi-php-ml-kutuphanesi","PHP ve Makine Öğrenimi: PHP-ML Kütüphanesi ile Pratik Çözümler",{"path":347,"title":348},"\u002Ftr\u002Fwindows-10-golang-kurulumu","Windows 10 ve 11'de Golang Kurulumu ve GOPATH Yapılandırması",{"path":350,"title":351},"\u002Ftr\u002Fsingleton-tasarim-deseni-nedir","Singleton Tasarım Deseni Nedir?",{"path":197,"title":353},"Tailwind CSS Just-in-Time (JIT) Modu Nedir?",{"path":355,"title":356},"\u002Ftr\u002Fes5-nedir","ES5 Nedir? JavaScript Geliştiricileri İçin Kılavuz",{"path":358,"title":359},"\u002Ftr\u002Fubuntu-guncellemesi-sonrasi-cyberpanele-ulasilamama-sorunlarini-giderme","Ubuntu Güncellemesi Sonrası CyberPanel'e Ulaşılamama Sorunlarını Giderme",{"path":361,"title":362},"\u002Ftr\u002Fecmascript-nedir-ecmascript-ne-degildir-bilinmesi-gerekenler","ECMAScript Nedir? Bilinmesi Gerekenler...",{"path":364,"title":365},"\u002Ftr\u002Fgo-programlama-dilinin-ozellikleri","Go Programlama Dilinin Özellikleri",{"path":367,"title":368},"\u002Ftr\u002Frestful-api-bilesenleri","RESTful API Bileşenleri",{"path":370,"title":371},"\u002Ftr\u002Fstrategy-tasarim-deseni-nedir","Strategy Tasarım Deseni Nedir?",{"path":373,"title":374},"\u002Ftr\u002Fwordpress-yonetici-sifresini-wp-cli-kullanarak-sifirlama","WordPress Yönetici Şifresini WP-CLI Kullanarak Sıfırlama",{"path":376,"title":377},"\u002Ftr\u002Fgo-ve-degiskenler","Go ve Değişkenler",[379,381,384],{"path":197,"title":353,"date":380},"2021-07-23",{"path":202,"title":382,"date":383},"Tailwind CSS Nerede Kullanılır? Tailwind CSS Nerede Kullanılmaz?","2021-09-25",{"path":274,"title":275,"date":380},[386,390,394],{"path":387,"title":388,"date":389},"\u002Ftr\u002Fmemento-tasarim-deseni-nedir","Memento Tasarım Deseni Nedir?","2021-10-04",{"path":391,"title":392,"date":393},"\u002Ftr\u002Fearly-return-erken-donus-nedir","Early Return \u002F Erken Dönüş nedir?","2021-09-11",{"path":350,"title":351,"date":395},"2021-08-17",1782142074268]