Tailwind CSS kullanmak için aşağıdaki adımları izlemek gerekmektedir:
- CDN Üzerinden Kullanım: Tailwind CSS'i hızlıca test etmek için, aşağıdaki kod parçasını HTML şablonunuzun
<head>
bölümüne ekleyin 2:
Bu, Tailwind CSS'in varsayılan utility sınıflarını kullanmanıza olanak tanır 2.<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
- npm ile Kurulum: Daha gelişmiş özelleştirme ve build işlemleri için Tailwind CSS'i npm ile kurun 4:
- Tailwind Yapılandırma Dosyası: Tailwind'in utility sınıflarını özelleştirmek için
tailwind.config.js
dosyasını oluşturun 24: - CSS'e Entegrasyon:
@tailwind
yönergelerini kullanarak Tailwind'in temel, bileşen ve utility stillerini CSS dosyanıza ekleyin 24:@tailwind base; @tailwind components; @tailwind utilities;
- Build İşlemi:
npx tailwindcss build main.css -o output.css
komutunu çalıştırarak Tailwind yapılandırmasını derleyin 2.output.css
dosyasını HTML şablonunuza dahil edin 2.
5 kaynaktan alınan bilgiyle göre: