English
Русский
Deutsch
ألمانية
Vite + React + Tailwind Kurulumu (Adım Adım)
Vite + React + Tailwind Kurulumu (Adım Adım)
Vite + React + Tailwind Kurulumu (Adım Adım)
React projelerinde hızlı geliştirme sağlayan Vite ile Tailwind CSS kurulumunu adım adım anlatacağım.
1. Projeyi Oluştur
npm create vite@latest my-app -- --template react
cd my-app
npm install
2. Tailwind CSS ve Eklentileri Yükle
npm install tailwindcss @tailwindcss/vite
3. Vite Yapılandırması
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
})
4. Tailwind’i CSS Dosyanıza Dahil Edin
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Tailwind Yapılandırma Dosyası Oluşturun (Opsiyonel)
npx tailwindcss init
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
6. Uygulamayı Başlatın
npm run dev
7. Tailwind Sınıflarını Kullanmaya Başlayın
function App() {
return (
icerik
) } export default App
Sonuç
Bu şekilde React, Vite ve Tailwind ile hızlı ve esnek bir frontend geliştirme ortamı oluşturabilirsiniz.