Bu kılavuzda Tailwind CSS'i bir projeye nasıl dahil edileceğini öğreneceksiniz.
Tailwind CSS, utility-first bir CSS framework'üdür. Yani, diğer CSS framework'lerinden farklı olarak hazır bileşenler yerine, size düşük seviye CSS sınıfları sunarak tasarımlarınızı daha esnek bir şekilde oluşturmanıza olanak tanır.
Tailwind CSS ile inline stil vermek yerine, HTML etiketlerine sınıflar ekleyerek stil verebilirsiniz.
Tailwind CSS'i kullanmak için aşağıdaki araçlara ihtiyacınız olacak:
- Node.js
- NPM (Node Package Manager) ya da Yarn
İlk olarak, terminal veya komut satırınızı açın ve yeni bir proje klasörü oluşturun.
mkdir tailwind-project
cd tailwind-projectProjede kullanacağınız bağımlılıkları yönetmek için package.json dosyasını oluşturun:
npm init -yTailwind CSS'i ve gerekli bağımlılıkları yüklemek için aşağıdaki komutu çalıştırın:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initBu komut, Tailwind CSS için bir yapılandırma dosyası olan tailwind.config.js dosyasını oluşturacaktır.
Tailwind'i projede kullanmak için aşağıdaki adımları izleyin:
Projenizin src klasörü altında bir styles.css dosyası oluşturun ve içerisine aşağıdaki satırları ekleyin:
@tailwind base;
@tailwind components;
@tailwind utilities;Bu dosya, Tailwind'in tüm utility sınıflarını projenize dahil edecektir.
Tailwind’i kullanabilmek için CSS dosyalarınızı derlemeniz gerekir. package.json dosyasına şu script’i ekleyin:
"scripts": {
"build": "npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}Bu script, src/styles.css dosyasını derleyip dist/styles.css olarak çıktı verecektir.
Oluşturduğunuz dist/styles.css dosyasını HTML dosyanıza dahil edin. Örneğin:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/styles.css" rel="stylesheet">
<title>Tailwind CSS ile Başlangıç</title>
</head>
<body>
<h1 class="text-3xl font-bold underline text-center">
Merhaba, Tailwind!
</h1>
</body>
</html>Terminalde şu komutu çalıştırarak Tailwind CSS dosyasını izleyin ve değişiklikler olduğunda otomatik olarak derleyin:
npm run build