Tailwind CSS Einrichtung

Fuegen Sie das Tailwind CSS Framework zu Ihrem Projekt hinzu.

Beginner10 Min.

Setup Steps

1. Install Tailwind CSS v4 for Vite projects:

npm install -D tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.ts:

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

3. Add to your CSS file (@/index.css):

@import "tailwindcss";

4. Tailwind CSS v3 setup (alternative):

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

5. tailwind.config.js configuration (v3):

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

6. Add to CSS file (v3):

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

7. Usage examples:

<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <p class="text-gray-600">Description text</p>
</div>

8. VS Code extension: Tailwind CSS IntelliSense

Related Guides

Auf Vercel deployen

Deployen Sie Ihr Next.js oder React-Projekt auf Vercel.

Auf Netlify deployen

Deployen Sie Ihre statische Website auf Netlify.

Bun Runtime Einrichtung

Installieren Sie die Bun JavaScript/TypeScript-Laufzeitumgebung.

Deno Einrichtung

Installieren Sie die Deno JavaScript/TypeScript-Laufzeitumgebung.