Tailwind CSS Nedir? Nasıl Kullanılır?

Tailwind CSS, Adam Wathan tarafından 4 kişilik bir ekip tarafından geliştirilen tamamen özelleştirilebilen CSS kütüphanesidir. Tailwind Bootstrap' tan farklı olarak hazır bir tema ile birlikte gelmez. Bunun yerine daha temel seviyede CSS tanımlamaları mevcuttur.

Tailwind CSS, sınıf tabanlı bir tasarım sistemi kullanır. Bu sistem, yazılımcıların web sayfasının görünümünü kontrol etmek için kullanabilecekleri birçok sınıfı içerir. Bu sınıflar, web sayfasına renk, yazı tipi, arka plan rengi, boşluk, büyüklük ve daha birçok şey eklemek için kullanılabilir.

Tailwind CSS ayrıca, responsive tasarım için önceden tanımlanmış sınıflar sunar. Bu sayede yazılımcılar, web sayfasının farklı ekran boyutlarında nasıl görüneceğini kolayca kontrol edebilirler.

Tailwind CSS' in en büyük avantajı custom tasarımlar üretmenin kolaylığıdır. Bootstrap kütüphanesinin temel kalıplarından kurtulup daha özgün tasarımlar geliştirmenize imkan sunar. Bu sayede tamamen özgün temalarınızı hızlı bir şekilde oluşturabilirsiniz. Arama motorları için sayfa yüklenme süresi önemli bir metriktir. Bu yüzden kullanmadınız kodların sayfanızda yüklenmesi bu süreyi uzatabilir. Tailwind CSS ile oluşturduğunuz custom classlar sayesinde sayfanıza sadece tanımladığınız CSS classları yüklenir.

Tailwind CSS Nasıl Kullanılır?

Tailwind CSS' i kullanabilmek için iki farklı yöntem mevcuttur. 

CDN ile Kurulum : Sayfanızın head tagleri arasına aşağıdaki kodu yerleştirerek Tailwind CSS'i kullanmaya başlayabilirsiniz.

<link href='https://unpkg.com/ tailwindcss@^2/dist/tailwind.min.css' rel="stylesheet">

CLI ile Kurulum(Önerilen) : Projenizi komut satırana aşağıdaki kodları yazarak Tailwind temel paketlerini projenize dahil edebilirsiniz.

npm install -D tailwindcssnpx tailwindcss init

Cli kurulumu sonrasında projenizin ana klasöründe tailwind.config.js dosyası oluşturulacaktır. w

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}

Bu dosya içinde bulunan content bölümüne projenizdeki şablon dosyalarınızı tanımlamanız gerekmektedir. Bu derleme için kritik öneme sahiptir. Tailwind bu alanda tanımlanan dosyaları inceleyerek sayfanızda sadece kullandığınız CSS classlarını dahil edecektir.

@tailwind base;
@tailwind components;
@tailwind utilities;

Projenizdeki ana style.css veya main.css dosyanıza yukarıdaki kodları yapıştırmanız gerekmektedir.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Kod blogunu çalıştırdığınızda projeniz için CSS derlemesi yapılmış olacaktır. Anasayfanızı head etiketleri arasına aşağıdaki bloğu yerleştirdiğinizde Tailwind CSS Kurulumu  tamamlanmış olacaktır.

<link href="/dist/output.css" rel="stylesheet">