
React Projesine Tailwind CSS Kurulumu
1. Projeni Oluştur
React projesi oluşturmak için aşağıdaki komutlardan birini terminalde çalıştır:
Seçenek 1 – Yeni klasör oluşturur:
npx create-react-app my-project cd my-project
Seçenek 2 – Mevcut klasör içine kurulum:
npx create-react-app .
2. Tailwind CSS'i Yükle
Tailwind CSS'i yüklemek ve yapılandırma dosyasını oluşturmak için:
npm install -D tailwindcss@3 npx tailwindcss init
3. Template Yollarını Ayarla
tailwind.config.js
dosyasını aşağıdaki gibi düzenle:
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }
4. Tailwind Direktiflerini CSS'e Ekle
./src/index.css
dosyasının içeriğini aşağıdaki gibi güncelle:
@tailwind base; @tailwind components; @tailwind utilities;
5. Geliştirme Sunucusunu Başlat
Projeyi başlatmak için:
npm run start