Tailwind CSS Kullanımı

1- Kurulum
JIT desteği sayesinde artık çok daha hızlı projeler geliştirmemizi sağlayan Tailwind
CSS’in mottosu HTML sayfasından CSS’e girmeden veya çok az giriş yaparak hızlı bir şekilde
proje geliştirmemizi sağlayan framework. Bu CSS Framework sayesinde kullanmış
olduğumuz CSS class’ların etiketilerini yazarak sadece onların çağırılmasını da
sağlayabiliyoruz.

Kurulum için öncelikle https://tailwindcss.com/docs/installation linkinden CLI’ı

seçebiliriz. Bu yöntem en hızlı ve en olanaklı yöntemlerden bir tanesidir. İstek doğrultusunda
Bootstrap gibi CDN olarak da çağırabiliriz. CLI kurulumu ile Tailwind kullanabilmek için
öncelikle node.js’in kurulu olması gerekiyor.

Öncelikle npm init -y yaparak package.json dosyamızı oluşturuyoruz burada hangi

eklentilerin kurulu olduğunu görebiliriz. Daha sonrasında npm i -D tailwindcss yaparak
tailwind dosyamızı kullanıma hazır hale getiriyoruz. İşlemlerimiz gayet güzel gidiyorsa
ayarlamalar yapılabilmesi için config dosyası oluşturulması gerekiyor bunun içinde
dökümantasyonda yer alan terminalimizden npx tailwindcss init diyoruz ve config
dosyamızın oluşturulmasına izin veriyoruz.

Dökümantasyonda dosyalarımızın hangi dizinde olduğunu gösteren bir açıklama var.

Eğer işlemlerimiz root dizinde gerçekleştirmek istiyorsak content alanına ‘./*html’ yapmamız
yeterli.

Direktif ayarlarımızın verilebilmesi için ise dökümantasyon dosyamızda input.css

dosyasını yaratıyoruz bu harici css dosyalarımız için base’imiz olacak.
 Sıradaki kısım ise dosyalarımızın çalışabilir olmasını sağlayan path kısmı. Bunu
aslında dokümantasyondan bağımsız olarak oluşturduğumuz package.json dosyamızda
Error kısmını silerek belirlemesini yapıyorum. Çünkü, ilerleyen süreçte kontrolünü daha hızlı
sağlayabilmem için bu bana ileride çok daha yararı dokunacak. Genel olarak ekran görüntüsü
ekleyecek olursam dizin ve yazılar alttaki şekilde olmalı.

Ve sonunda npm run build diyerek dosyalarımızı localimize çekiyoruz

Oluşturulan css dosyasının içerisinde main.css ile anadizinimizin bu olduğunu görebiliriz.

Hemen root dizinde index.html dosyasını oluşturalım ve css dosyamızı main

dosyamızdan çağıralım. Aynı Bootstrap’te olduğu gibi class’a özelliklerimizi ekledik ve npm
run watch diyerek görmek istiyoruz.

Her şey mükemmel görünüyor Kurulumumuz bu kadar. Devamında Özelleştirmeler

ve Ayarlar kısmından söz edeceğim.
2- Özelleştirmeler & Ayarlar
Öncelikle, ilk defa kullanım için Visual Studio Code eklentisi olan Tailwind CSS
IntelliSense topluluk tarafından önerilen bir eklenti. Bunun kurulumunu da gerçekleştiriyoruz.
Bu olmazsa olmaz değil ama bana kalırsa olmazsa olmaz bir eklenti çünkü size kullanımda o
kadar rahatlık sağlayacak.

Proje üzerinden gitmek daha mantıklı olacağı için yukarıdaki tasarımı Tailwind
sayesinde kullanılabilir hale çevireceğiz. Bunun için kendi breakpointlerimiz olması lazım.
tailwind.config.js dosyasına gelerek theme’nin altına screens diye bölüm ayırıyorum. Sebebi
ise basitçe breakpointler eklemek istiyorum. Bootstrap’te kullanılan small, medium, xl gibi.
Daha sonrasında projemde kullanılacak olduğum renkleri ekliyorum. Bu sayede harici
breakpointlerimizi bu şekilde kullanabileceğimizi öğreniyoruz.
3- Menü Alanı, Spacing & Uyumluluk
Tasarımımızı, çalışabilir hale dökmenin zamanı geldi. Bunun için ilk olarak menü
alanından başlayacağız. Birkaç test yapmak için navbar alanına bakıyorum.

Aynı nav class’ımızı oluşturduk ve ona relative özelliği verdik aynı zamanda
container’in içine alarak ortalamamızı sağladık. Testimizi görebilmek için ise arka plana renk
verdik. Daha sonrasında ise istediğim ölçüde div’lerimi oluşturuyorum. Mantık olarak bir tane
Flex Container olacak bunu da sağa sola yaslayarak yapacağım. Çünkü sol tarafta logoyu
sağ tarafta ise menülerim olacak. İsteğim, eğer mobil ölçülere geldiğinde menünün
gözükmemesi. Bu konuda Tailwind yardımımıza gerçekten jet hızıyla ulaşıyor.

Çünkü hidden class’ı sayesinde flex özelliğine görünürlüğünü ayarlayabiliyorum. Bu

şekilde Responsive yapıyı çok rahat kurabiliyor ve mobilde aşağıya doğru uzanan bir menü
yapacağım. Aşağıdaki görselden ne demek istediğimi daha iyi anlayabileceksiniz.
 Tailwind sayesinde yapabildiğimiz güzel olaylardan bir tanesi ise hover özelliği.
Bootstrap gibi kütüphanelerde olmayan bu özellik ile CSS’e gelmeden hızlıca hover
ekleyebiliyoruz.

Tasarımda bulunan sağ tarafta ki button’u eklemek istiyorum.

Burayı açıklamak gerekirse, mobil olduğunda görüntülenmemesi, padding değerlerine

3 rem’lik boşluk bırakılmasını, yukarıdan aşağıdan 6 rem’lik alan ayarlamasını ve yukarıdan 2
remlik kısım belirlemesini istiyorum ve hover özelliği sayesinde üstüne gelindiğinde renk
değiştirmesini istiyorum.

İstediğim gibi görünüyor şuanda, harika. ✅ Menü kısmını istediğimiz gibi

tamamladığımız için artık Hero Section’a geçiş yapabiliriz.
4 – Hero Section

Yapmak istediğim kısım şuanda genellikle Hero Section olarak isimlendirilen bu

bölüm. Şöyle bir baktığımızda bir tane h1, daha sonrasında paragraf flex olarak ikiye ayrılmış
bir alan ve buton olduğunu görüyoruz ve küçültültüğünde mobil görünüm sağlandığında
resmin yukarıda olmasını istiyorum. <nav> etiketlerinden sonra Hero Section kısmını
yazmaya başlıyorum.

Id’si hero olan bir tane section açarak kodlarımı yazmaya başladım. Buraya hero
alanında olacak tüm kodlarımı yazıyorum. Mantık olarak sol tarafta yazılar ve sağ tarafta
yazılar olacağı için ikiye böldüm. Kodları açıklayacak olursak bunları birer container’in
içerisine aldık ve flex özelliği verdik ve flex-col-reverse yaparak sondan başlamasını istedik.
Sebebi ise resim kısmının çözünürlük düştüğünde yukarıda olmasını istiyorum. Mobil kısımda
ise flex özelliğinin satır olmasını stedik ve her şeyi ortalayarak gerekli yükseklik ayarlarını
verdik. Daha sonrasında yazı bölümüne gelerek Tailwind’ın güzel özelliklerinden bir tanesi
olan yüzde ifadelerini vererek mobilde içeriklerin yüzde elli küçültülmesini istedik. Başlık ve
Paragraf özelliklerimizi de ona göre düzenledik. Büyük ekranda metinler sola yaslı iken
mobilde ortalı olması sağlandı.

Artık metin işlemlerimiz bittiğine göre resim kısmını ekleme zamanı geldi ve class’ına
mobilde yüzde elli küçültelerek eklenmesini istedik. Yukarıda bahsettiğim gibi flex-col-reverse
özelliği sayesinde artık mobilde resim yukarıda görüntülenmesini sağladık. Çalışma mobilde
aşağıda ki görünüme sahipken

Normal, bilgisayardan görünümü ise bu şekilde.

4 – Features Section

Features section için yukarıda ki gibi bir tasarım yapmam gerekiyor, yine Hero
Sectionda ki gibi features id’li bir tane div oluşturuyorum. İşlemler artık birbirlerine çok
benzediği için yapılmak istenilen ve nasıl yapıldığına dair anlatmaya doğru geçiş yapıyorum.
Yukarıda ki görselimize baktığımızda ikiye bölünmüş bir alan var ve bunlar container’ın içinde
fakat mobil kısmında soldaki yazılar yukarıda ve ortalı sağda ki numaralı liste ise aşağıya
doğru olmak zorunda.
 Liste kısımlarını bu şekilde tamamlayabiliriz. Farklı işlemler yaptık burada çünkü,
mobilde ki görünümde arka planda turuncu bir şekilde sıralı gelmesini istedik. Mobile first
tasarım prensibinden dolayı normal arkaplan rengini kendi eklemiş olduğumuz açık kırmızı
olduğunu fakat ekran genişliği yükseltildiğinde transparan olmasını sağladık ve numaraları
yuvarlak içine aldık. Tasarım mobil kısımda aşağıda ki gibi görünüyor.
4 – Testimonial Section

Tasarımımızda böyle bir testimonial alanı var. Yukarıda resim de gördüğünüz gibi bir
yapıya bölmem gerekiyor. En dışarda genel bir id’si testimonial olan bir div, daha sonrasında
hepsini kapsayan ayrı bir container, heading alanı. Sonra ki adımda ise yorumların hepsini bir
içine alan bir alan ve onun alt başlıkları.
 Kodlamasını bu şekilde yaptım ve negatif margin değeri ekleyerek fotoğraflarının
daha yukarda olmasını sağladım. Mobilde ise sadece bir tanesini göstermek istediğim için
görünürlüklerini kapattım.

Bu görünümü elde ettim, mobilde ise istediğim gibi aşağıda ki görüntüye sahip.

Testimonials kısmı şimdilik bu kadar. İlerleyen süreçte aslında Carousel kısmı yapılabilir.
4 – CTA Section

Bu kısım aslında diğerlerinden çok daha basit ve uğraş gerektirmiyor. İki tane
column’a bölünmüş, sağ tarafta buton ve sol tarafta yazı olacak bir şekilde bölüm ayarlayıp
bu işi sonlandıracağım. Arkaplan görselleri ise en son tüm iskeletler bittikten sonra custom
CSS ile eklemeler yapacağım.

Yukarıda ki kodları yazdıktan sonra işlemim bitiyor. Uzun uzun class isimlerini
yazdığımın farkındayım fakat burada ki asıl amacımızın sadece Tailwind CSS kullanarak bir
tasarımı CSS’e dökmek olduğunu unutmayalım.

Mobil kısımda button’a hover olduğunda olan kısım bu şekilde görünüyor.

4 – Footer

Güzel bir alana geçiş yaptığımızı söylebilirim. Çünkü benzer işlemleri yapmak bir
müddet sonra insanı sıkabiliyor. Burada yapmak istediğimiz dışarıda footer oluşturmak daha
sonrasında herzaman ki gibi hepsini kapsayan bir div ve içerlerini 3’e bölmek. Sadece Tailwind
Class’larını kullanmak için bu alan güzel bir pratik olabilir.

Hemen kodlarımı yazmaya başlıyorum. Aynı ilk örnekte olduğu gibi flex-col-reverse örneğini
kullanarak logo’yu yukarıya taşımayı düşünüyorum.

Mobilde footer’ın böyle görünen bir yapı kurdum. Kodları Footer alanı için açıklamayacağım.
Github üzerinden projenin bitmiş halinden inceleyebilirsiniz. Burada ki eksik kalan yapılar kaldı.
Bunlara örnek olarak Menu mobilde görüntülenmemesi bunun için Hamburger Menu işlemine giriş
yapacağım.
4 – Hamburger Menu HTML
Projenin eksik kalan kısımlarından bir tanesi Hamburger menüydü bunun için <nav>
etiketlerimizin bitişinden önceki yerine gelip hemen yapıyı kurmaya başlıyorum. Yapı için öncelikle
Hamburger Icon kısmını oluşturuyorum hamburger-top, hamburger-middle ve hamburger-bottom
olarak ve görüntülenmesini hidden olarak ayarlıyorum.

Daha sonrasında mobil için gösterilecek olan kısımı ayarladım. Bunun için absolute
değerlerinde olacak ve biraz arkaplan gölgesi eklenmesi iyi olur. Genel olarak görünümü aşağıda ki
gibi duruyor.

Yapmak istediğim tasarımı bitirdikten sonra hidden diyerek gizliyorum. Bu kısımı Javascript
sayesinde daha iyi bir şekilde ayarlayacağım. Aslında Javascript kullanmadan düz CSS ile animations
değerleri ilede yapabilirim fakat Javascript kullanmak daha kolay bir çözüm sunacak. Şuanda ise
ilk başta icon değerlerini verdiğimiz alana Custom CSS kısımlarını ve daha sonra ekleyeceğim dediğim
arkaplan görsellerini ekleme işlemini gerçekleştireceğim.
4 – Vanillia CSS ve Menü için Biraz Javascript
Evet, şuana kadar tasarlanmış olan tasarımın tamamına yakınını sadece ve sadece Tailwind
teknolojisini kullanarak bu noktaya getirdik. HTML sayfasından başka hiçbir işlem yapmadık ve bu
gerçekten inanılmaz. Artık bi’ nebze de olsa kendi CSS işlemlerimizi gerçekleştirmemiz
gerekiyor. Olması gereken tasarımda aşağıda ki gibi alanlarda arkaplan SVG dosyaları bulunuyor.

Hemen tasarım işlemlerini tamamlamak için input.css dosyamıza gidiyoruz. Burada

yapmamız gereken işlemler var. İlk olarak arkaplan SVG dosyalarımızı ayarlayarak başlıyorum.

Klasik Vanillia CSS yazarak gerekli arkaplan işlemlerimizi gerçekleştirdik ve Responsive özelliği
için 576 px’ın altında olduğunda ona göre konumlandırmasını yaptık.
Hamburger Menu tasarımı için ise öncelikle dışarıda ki genel hamburger classına daha sonrasında ise
top, middle ve bottom oluşturduğumuz div’lere gerekli özellikleri verdim.

Bu CSS dosyasını anlatacak olursam imlecimiz üstüne geldiğinde tıklama ile değiştirecek ve
24’e 24 piksel boyutunda bir alan gerektirdiğini ve geçişli bir işlem olduğunu belirtiyorum.

Devamında ise 3’üne genel işlemler verirken top classımızı almıyorum çünkü istiyorum ki,
tıklanıldığında döndürme işlemi olup çarpı butonuna dönüş yapsın. Devamını Javascript kullanarak
devam edeceğim.
 Anadizinde script.js dosyamı açarak yukarıda ki kodlarımı yazdım ve kullanmış olduğum HTML
sayfama gerekli eklemeleri yaptım. Yukarıda ki kod parçasında ise sabit btn ve nav değişkenleri
oluşturarak menu-btn ve menu id’lerini yakaladım ve addEventListener click işlemi sayesinde open,
flex ve hidden işlemlerini gerçekleştirdim. Daha sonrasında ise input.css dosyama geri giderek bu
işlemlere CSS özellikleri ekledim.
5 – Ve Sonuç
Desktop’ta bu şekilde, mobilde ise aşağıda ki gibi görünen tasarımı kullanılabilir hale getirdik
ve bunların hepsini hemen hemen hiç Vanillia CSS kullanmadan sadece Tailwind CSS Framework’unu
kullanarak gerçekleştirdik. Sonuç gerçekten muazzam.