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
English
Русский
Deutsch
ألمانية
React Projesine Tailwind CSS Kurulumu