Herkese merhabalar, bu yazımda TailwindCSS'den bahsedeceğim. Tailwind tanım olarak a utility-first CSS framework diye geçiyor. Peki bu tam olarak ne demek?
Günümüzde web sayfalarını yazarken temelde üç dil kullanıyoruz. Sayfanın düzenini yazdığımız HTML, sayfa stillerini yazdığımız CSS ve de sitenin çalışan kod kısmını yazdığımız JavaScript. Fakat tahmin edeceğiniz gibi sitemizi sıfırdan oluşturmuyoruz, kolay yöntemleri var. İşte bu konuda bize en çok katkı sağlayan şeylerden biri de CSS frameworkleri. Bize hazır stiller sunarak işimizi baya kolaylaştırıyor. Sadece HTML'de class belirterek rahatlıkla web sayfaları hazırlayabiliyoruz. CSS frameworklerine Bootstrap, Bulma, Semantic UI, Materialize gibi birçok örnek verebiliriz.
CSS frameworklerinin en büyük sorunu hazırlanan sitelerin hepsinin birbirine benzemesi. Özellikle navbar (web sitelerinde en yukarıda bulunan menü çubuğu - navigation bar) düzenleri frameworkleri ele veriyor. Özgün bir site oluşturulmak istendiğinde ya framework kodlarını düzenleyip daha farklı bir şeyler ortaya çıkartmak ya da framework kullanmadan yazmak gerekiyor. Tailwind'in ise çalışma mantığı daha farklı.
Tailwind bize bunun için bir çözüm sunuyor, birçok framework'ün aksine Tailwind'de navbar, modal vb. komponentler yok, onların yerine utility sınıfları var. Mesela mavi renkli bir buton tasarlamak istiyorsunuz ve butonun üstüne gelindiğinde butonun rengi koyulaşacak. Normalde CSS yazarak halledebilirsiniz ama yazılmışı zaten var.
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
Buradan nasıl çalıştığını inceleyebilirsiniz.
Gördüğünüz gibi burada çeşitli classlar var, bg-blue arkaplanı ayarlarken px-4 de x ekseninde 4 birim padding olması gerektiğini söylüyor. hover: ise bu duruma geçildiğinde kodun nasıl davranması gerektiğini söylüyor.
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4 m-4">
<p class="font-bold">Be Warned</p>
<p>Something not ideal might be happening.</p>
</div>
Mesela bir örnek daha. Burada da bir alert bulunuyor. Sadece HTML sınıflarını kullanarak bu tarz komponentler hazırlamak oldukça kolay.
Tailwind'i projemize eklemek
TailwindCSS'i kullanmak için iki farklı yöntem var. İlki bir CDN yardımıyla HTML kodunuza tailwind.min.css dosyasını eklemek.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
Yukarıdaki kodu HTML sayfamızın <head> kısmına eklersek kodumuz sorunsuz çalışacaktır.
Diğeri ise npm yardımıyla Tailwind'i indirdikten (npm install tailwindcss) sonra webpack vb. bir bundler kullanıyorsanız Tailwind'i onun yardımıyla import etmek.
// webpack.config.js
var tailwindcss = require('tailwindcss');
module.exports = {
// ...
plugins: [
// ...
tailwindcss('./path/to/your/tailwind-config.js'),
// ...
]
}
Buradaki tailwind-config.js dosyasına birazdan geleceğiz.
Tailwind iyi hoş da şöyle bir problem ortaya çıkıyor. Yazdığınız kodun içinde çokça buton kullanacaksınız. Kullandığınız butonların hepsine 10 tane class eklemek çok da güzel olmayabilir. Bunun için ise Tailwind'in ilginç bir çözümü var. Tailwind PostCSS isminde bir css pre-processor'üyle yazılmış, yani yazdığınız PostCSS kodunu compile edip css olarak kullanabiliyorsunuz. PostCSS'in ise @apply isminde bir özelliği var.
.btn {
@apply font-bold py-2 px-4 rounded;
}
Yukarıda gördüğünüz gibi artık btn classını içeren tüm HTML elementleri yukarıdaki CSS sınıflarını içerecek. Bu tanımları yeni oluşturduğunuz .pcss uzantılı bir dosyaya atıp Tailwind'i import ettiğiniz zaman kodunuz sorunsuz çalışacaktır.
@import "tailwindcss/preflight";
@import "tailwindcss/components";
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue text-white;
}
.btn-blue:hover {
@apply bg-blue-dark;
}
@import "tailwindcss/utilities";
Burada sıra önemli. CSS sınıflarında en son tanımlananın önceliği daha fazla olduğu için utilities'i en son import etmeniz gerekiyor.
Daha ayrıntılı bilgiye buradan ulaşabilirsiniz.
Tailwind-config.js
Gelelim tailwind-config.js dosyasına. Biraz önce yazdığınız kodu düşünecek olursak orada @import "tailwincss/utilities" tüm utilities'i import ediyorduk. Öntanımlı olarak Tailwind'de hover: gibi durum belirten CSS belirteçleri sadece belirli durumlarda çalışıyor. Herhangi bir elementin üstüne geldiğinizde o elementin border width'inin değişmesini istiyorsanız kodunuz çalışmayacaktır. Çalışması için tailwind-config.js dosyasına hover:'a bağlı olan değişkenlere border'ı da eklememiz gerekiyor. Webpack de kodu işlerken bu dosyaya göre aksiyon alıp, gerekli CSS sınıflarını yaratıyor.
Meraklısına:
PostCSS'in nested CSS gibi birçok özelliği var. PostCSS kullanırken aynı anda PurgeCSS'i de aktif edebilirsiniz. PurgeCSS yazdığınız HTML kodunu tarayıp (React, Vue vb. frameworkleri de destekliyor) sizin için gereksiz CSS kodunu siliyor. Bu sayede normalde 36kb olan Tailwind kodunu 10kb altına rahatlıkla indirebilirsiniz. Ayrıntılı bilgiye buradan ulaşabilirsiniz.
Son Olarak
Şuraya Tailwind ile yapılmış iki web sitesi örneği koyuyorum: https://laravel-tenancy.com/ - https://urbanforefront.com/. Gördüğünüz gibi Tailwind sayesinde aynı CSS frameworklerine sahip olduklarından birbirinin aynısı olan web siteleri artık yok. Bu tarz daha çok siteye bakmak isterseniz bu adresi inceleyebilirsiniz.
Daha fazla örnek ve kaynakça için https://tailwindcss.com adresini ziyaret edebilirsiniz.