Tailwind CSS Kurulumu

Tailwind CSS utility-first CSS framework'ünü projenize ekleyin.

Başlangıç10 dk

Kurulum Adımları

1. Tailwind CSS v4'ü Vite projelerine kurun:

npm install -D tailwindcss @tailwindcss/vite

2. vite.config.ts'e eklenti ekleyin:

import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [tailwindcss()]
})

3. CSS dosyanıza (@/index.css) ekleyin:

@import "tailwindcss";

4. Tailwind CSS v3 kurulumu (alternatif):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

5. tailwind.config.js yapılandırması (v3):

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

6. CSS dosyasına ekleyin (v3):

@tailwind base;
@tailwind components;
@tailwind utilities;

7. Kullanım örnekleri:

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <h1 class="text-2xl font-bold text-gray-900">Başlık</h1>
  <p class="text-gray-600">Açıklama metni</p>
</div>

8. VS Code eklentisi: Tailwind CSS IntelliSense

İlgili Rehberler

Vercel'e Deploy Etme

Next.js veya React projenizi Vercel platformuna deploy edin.

Netlify'a Deploy Etme

Statik site veya JAMstack projenizi Netlify'a deploy edin.

Bun Runtime Kurulumu

Bun JavaScript/TypeScript runtime'ını kurun. Node.js'e hızlı alternatif.

Deno Kurulumu

Deno JavaScript/TypeScript runtime'ını kurun. Güvenli ve modern alternatif.