28 May 2025

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