Tailwind CSS und shadcn/ui in dein Projekt integrieren

Veröffentlicht am 22. Januar 2026

Tailwind CSS und shadcn/ui sind zwei mächtige Tools, die die Entwicklung moderner Benutzeroberflächen erheblich beschleunigen können. In diesem Tutorial zeige ich dir, wie du beide in dein Projekt integrierst.

Was ist Tailwind CSS?

Tailwind CSS ist ein Utility-First CSS-Framework, das dir ermöglicht, schnell benutzerdefinierte Designs direkt in deinem HTML zu erstellen, ohne eigene CSS-Dateien schreiben zu müssen.

Was ist shadcn/ui?

shadcn/ui ist keine Bibliothek im traditionellen Sinne. Es ist eine Sammlung von wiederverwendbaren Komponenten, die du kopieren und in deine Apps einfügen kannst. Die Komponenten sind mit Tailwind CSS gestylt und nutzen Radix UI für die Zugänglichkeit.

1. Tailwind CSS installieren

Für ein Nuxt-Projekt ist die Installation besonders einfach:

npm install -D @nuxtjs/tailwindcss
npx tailwindcss init

Füge dann das Modul in deiner nuxt.config.ts hinzu:

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

2. Tailwind konfigurieren

Passe die tailwind.config.js nach deinen Bedürfnissen an:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#42b883',
        secondary: '#35495e',
      },
    },
  },
  plugins: [],
}

3. shadcn/ui einrichten

Für shadcn/ui benötigst du zunächst einige zusätzliche Abhängigkeiten:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
npm install @radix-ui/react-slot

Erstelle eine utils-Datei für die Klassenverwaltung:

// lib/utils.ts
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

4. Erste shadcn/ui-Komponente hinzufügen

shadcn/ui Komponenten werden direkt in dein Projekt kopiert. Besuche ui.shadcn.com und wähle eine Komponente aus. Hier ein Beispiel für einen Button:

// components/ui/Button.vue
<template>
  <button
    :class="cn(
      'inline-flex items-center justify-center rounded-md text-sm font-medium',
      'transition-colors focus-visible:outline-none focus-visible:ring-2',
      'disabled:pointer-events-none disabled:opacity-50',
      variants[variant],
      sizes[size],
      className
    )"
    v-bind="$attrs"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { cn } from '~/lib/utils'

interface Props {
  variant?: 'default' | 'destructive' | 'outline' | 'ghost'
  size?: 'default' | 'sm' | 'lg'
  className?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  size: 'default',
})

const variants = {
  default: 'bg-primary text-white hover:bg-primary/90',
  destructive: 'bg-red-500 text-white hover:bg-red-600',
  outline: 'border border-input bg-background hover:bg-accent',
  ghost: 'hover:bg-accent hover:text-accent-foreground',
}

const sizes = {
  default: 'h-10 px-4 py-2',
  sm: 'h-9 rounded-md px-3',
  lg: 'h-11 rounded-md px-8',
}
</script>

5. Komponente verwenden

Jetzt kannst du die Komponente in deinen Seiten nutzen:

<template>
  <div>
    <Button variant="default">Klick mich</Button>
    <Button variant="outline">Outline Button</Button>
    <Button variant="ghost">Ghost Button</Button>
  </div>
</template>

<script setup lang="ts">
// Auto-import dank Nuxt
</script>

Best Practices

1. Konsistente Farbpalette

Definiere deine Farben in der Tailwind-Konfiguration, um eine konsistente Farbpalette im gesamten Projekt zu gewährleisten.

2. Wiederverwendbare Komponenten

Erstelle wiederverwendbare Komponenten für häufig verwendete UI-Elemente, um Code-Duplikation zu vermeiden.

3. Dark Mode vorbereiten

Nutze Tailwinds Dark Mode-Funktionen von Anfang an, um später einfach einen Dark Mode hinzufügen zu können.

Fazit

Die Kombination aus Tailwind CSS und shadcn/ui ermöglicht es dir, schnell schöne und zugängliche Benutzeroberflächen zu erstellen. Der Utility-First-Ansatz von Tailwind gibt dir volle Kontrolle über das Design, während shadcn/ui dir vorgefertigte, anpassbare Komponenten bietet, die du direkt in dein Projekt integrieren kannst.