Tailwind CSS mit Vue 3: Best Practices für die Composition API

1. Warum die Composition API das Tailwind Styling verändert

Die Composition API von Vue 3 organisiert Logik nach fachlicher Zugehörigkeit statt nach Optionstyp, und dieser Wechsel wirkt sich direkt auf den Umgang mit Tailwind CSS in Vue 3 Projekten aus. Statt Styling Logik über mehrere Options API Blöcke wie data, computed und methods zu verteilen, lässt sich mit der Composition API die gesamte Logik für eine Komponenten Variante an einer Stelle bündeln, inklusive der zugehörigen Tailwind Klassenlisten. Das macht nachvollziehbar, welche Zustände welche visuellen Effekte auslösen.

Ein zweiter wichtiger Aspekt ist die Extraktion von Logik in Composables. Wo die Options API Mixins mit ihren bekannten Namenskonflikten nutzte, erlauben Composables in Tailwind CSS mit Vue 3 eine explizite, typsichere Wiederverwendung von Styling Logik über mehrere Komponenten hinweg. Ein Composable, das Button Varianten als Tailwind Klassenlisten zurückgibt, kann in Dutzenden Komponenten importiert werden, ohne dass Namenskonflikte oder unklare Herkunft von Eigenschaften entstehen, wie es bei klassischen Mixins häufig der Fall war.

2. Projekt Setup: Tailwind CSS in Vue 3 einrichten

Das Setup von Tailwind CSS in Vue 3 läuft heute meist über Vite, den Standard Build Tool für neue Vue Projekte. Das offizielle @tailwindcss/vite Plugin wird in der vite.config.ts registriert, eine globale CSS Datei importiert Tailwind CSS 4 und definiert projektspezifische Design Tokens über @theme. Diese Konfiguration ist unabhängig davon, ob Single File Components mit <script setup> oder klassischer Composition API Syntax geschrieben werden.

Wichtig für Tailwind CSS mit Vue 3 ist außerdem die korrekte Konfiguration der Quell Dateierkennung, damit Tailwind auch Klassennamen innerhalb von .vue Dateien im Template Block erfasst. Da Vue Single File Components Template, Script und Style in einer Datei kombinieren, muss der Tailwind Scanner explizit auf das .vue Dateiformat eingestellt sein, was bei aktuellen Tailwind CSS 4 Versionen mit dem Vite Plugin automatisch funktioniert, in älteren Setups aber manuell in der Content Konfiguration ergänzt werden musste.

# Vue 3 project with Vite and Tailwind CSS 4
npm create vue@latest tailwind-vue-demo
cd tailwind-vue-demo
npm install tailwindcss @tailwindcss/vite

# vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [vue(), tailwindcss()],
});

3. Reaktive Klassenlisten mit computed und :class

Der Kern von reaktivem Tailwind Styling in Vue 3 ist die Kombination aus :class Bindungen und computed Eigenschaften. Statt Klassennamen direkt im Template mit mehreren Ternary Ausdrücken zu verschachteln, extrahiert man die Logik in eine computed Eigenschaft, die ein Objekt oder Array mit den passenden Klassennamen zurückgibt. Diese Trennung macht das Template lesbarer und die Styling Logik unabhängig testbar, was bei komplexeren Tailwind CSS Vue 3 Komponenten den Unterschied zwischen wartbarem und undurchsichtigem Code ausmacht.

Die Objekt Syntax von :class, bei der Schlüssel Klassennamen und Werte boolesche Ausdrücke sind, eignet sich besonders gut für Zustände wie aktiv, deaktiviert oder fehlerhaft. Für zusammengesetzte Varianten, etwa Größe kombiniert mit Farbe, ist eine computed Eigenschaft vorzuziehen, die auf Basis der Props die passende, vollständige Klassenliste zusammenstellt. Wichtig bleibt auch hier: die einzelnen Klassennamen in dieser Liste müssen als vollständige Strings im Quellcode stehen, damit der Tailwind Scanner sie zur Build Zeit erkennt.

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  variant: 'primary' | 'secondary' | 'danger';
  disabled?: boolean;
}>();

// Full class strings, mapped from props — never concatenated at runtime
const VARIANT_CLASSES = {
  primary: 'bg-sky-600 text-white hover:bg-sky-700',
  secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
  danger: 'bg-red-600 text-white hover:bg-red-700',
} as const;

const buttonClasses = computed(() => [
  'inline-flex items-center gap-2 rounded-lg px-4 py-2 font-semibold transition-colors',
  VARIANT_CLASSES[props.variant],
  { 'opacity-50 cursor-not-allowed': props.disabled },
]);
</script>

<template>
  <button :class="buttonClasses" :disabled="disabled">
    <slot />
  </button>
</template>

4. Composables für Varianten und Design Tokens

Composables sind das Vue 3 Äquivalent zu React Hooks und eignen sich hervorragend, um Tailwind Varianten Logik über mehrere Komponenten hinweg wiederzuverwenden. Ein Composable wie useButtonVariants() kapselt die vollständige Zuordnung von Props zu Klassennamen und gibt eine computed Eigenschaft zurück, die in jeder Komponente, die Buttons rendert, importiert werden kann. Für Tailwind CSS in Vue 3 bedeutet das: Änderungen am Design System, etwa ein neuer Farbton für den primären Button, müssen nur an einer einzigen Stelle vorgenommen werden.

Ein weiterer Vorteil von Composables gegenüber globalen CSS Klassen mit @apply ist die Typsicherheit. Mit TypeScript typisierte Composables verhindern, dass ein ungültiger Varianten Name wie "primry" unbemerkt durchrutscht, weil der Compiler den Tippfehler bereits zur Entwicklungszeit meldet. Diese Kombination aus Tailwind CSS und Vue 3 Composables ist besonders wertvoll in größeren Teams, in denen mehrere Entwickler gleichzeitig an unterschiedlichen Komponenten arbeiten, aber ein einheitliches visuelles Vokabular benötigen.

// composables/useButtonVariants.ts
import { computed, type Ref } from 'vue';

type Variant = 'primary' | 'secondary' | 'danger';
type Size = 'sm' | 'md' | 'lg';

const VARIANTS: Record<Variant, string> = {
  primary: 'bg-sky-600 text-white hover:bg-sky-700',
  secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
  danger: 'bg-red-600 text-white hover:bg-red-700',
};

const SIZES: Record<Size, string> = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

export function useButtonVariants(variant: Ref<Variant>, size: Ref<Size>) {
  return computed(() => [
    'inline-flex items-center gap-2 rounded-lg font-semibold transition-colors',
    VARIANTS[variant.value],
    SIZES[size.value],
  ]);
}

5. Scoped Slots und Utility Klassen von außen steuern

Scoped Slots erlauben es, Daten aus einer Kindkomponente an den Elternteil zurückzugeben, was in Kombination mit Tailwind CSS in Vue 3 ein mächtiges Muster für flexible, aber kontrollierte Komponenten ergibt. Eine Listenkomponente kann etwa den aktuellen Index und Auswahlzustand über einen Scoped Slot zur Verfügung stellen, während die Elternkomponente daraus die passenden Tailwind Klassen für das jeweilige Listenelement berechnet. So bleibt die Kernlogik der Liste generisch, während das visuelle Erscheinungsbild vollständig vom Verwendungskontext abhängt.

Ein bewährtes Muster für Design Systeme ist zusätzlich, Basiskomponenten wie Cards oder Panels über benannte Slots mit vordefinierten Tailwind Klassen für Header, Body und Footer Bereiche auszustatten, während spezifische Anpassungen über eine class Prop möglich bleiben, die mit den Standardklassen der Basiskomponente zusammengeführt wird. Bibliotheken wie tailwind-merge lösen dabei zuverlässig auf, welche Klasse bei widersprüchlichen Utility Klassen tatsächlich gewinnt, etwa wenn sowohl die Basiskomponente als auch die aufrufende Komponente eine Hintergrundfarbe setzen.

6. Teleport, Transition und Tailwind Animationen

Das <Teleport> Element von Vue 3 rendert Inhalte an einer anderen Stelle im DOM Baum, typischerweise für Modals, Tooltips und Benachrichtigungen, die visuell über der restlichen Anwendung liegen müssen. Für Tailwind CSS mit Vue 3 ist das relevant, weil ein Modal, das per Teleport direkt unter body gerendert wird, unabhängig von der Stacking Context Hierarchie der aufrufenden Komponente positioniert werden kann, was z-index Konflikte deutlich reduziert, die sonst häufig in tief verschachtelten Komponenten Bäumen auftreten.

Kombiniert mit dem eingebauten <Transition> Element lassen sich Ein und Ausblendeffekte über Tailwind Klassen für die verschiedenen Übergangsphasen steuern, etwa enter-from, enter-active und enter-to. Diese Klassen werden von Vue automatisch zum richtigen Zeitpunkt hinzugefügt und entfernt, während Tailwind lediglich die visuellen Werte für Opacity, Transform und Timing liefert. Diese Kombination aus Tailwind CSS und Vue 3 Transition Mechanik ergibt animierte Modals und Dropdowns ohne zusätzliche Animationsbibliothek.

7. Script Setup Syntax und Props Typisierung mit Klassen

Die <script setup> Syntax ist mittlerweile der Standard für neue Vue 3 Komponenten und reduziert Boilerplate erheblich gegenüber der klassischen Composition API mit explizitem setup() Aufruf. Für Tailwind CSS in Vue 3 Komponenten bedeutet das kürzere, fokussiertere Dateien, in denen Props Typisierung über defineProps mit TypeScript Generics direkt neben der Styling Logik steht. Diese räumliche Nähe erleichtert es, Prop Typen und daraus abgeleitete Klassennamen konsistent zu halten.

Ein Muster, das sich in vielen Tailwind CSS Vue 3 Komponentenbibliotheken bewährt hat, ist die Verwendung eines diskriminierten Union Types für Varianten Props, kombiniert mit einem as const Objekt für die zugehörigen Klassennamen. TypeScript erzwingt so zur Kompilierzeit, dass jede mögliche Variante auch tatsächlich eine passende Klassenzuordnung besitzt, und ein neuer Varianten Wert ohne zugehörige Klassen fällt sofort als Compiler Fehler auf, statt erst zur Laufzeit im Browser sichtbar zu werden.

8. State Management mit Pinia und UI Zustände in Tailwind

Pinia hat Vuex als Standard State Management Lösung für Vue 3 abgelöst und nutzt intern dieselbe Composition API Philosophie wie Composables. Für UI Zustände, die mehrere Komponenten betreffen, etwa ein globales Dark Mode Flag oder ein Sidebar Collapsed Zustand, bietet sich ein Pinia Store an, dessen reaktiver Zustand direkt in computed Eigenschaften für Tailwind CSS in Vue 3 Klassenlisten einfließt. So bleibt die Zustandslogik zentral, während jede Komponente lokal entscheidet, wie sie auf diesen Zustand visuell reagiert.

Ein häufiges Beispiel ist ein Theme Store, der zwischen hellem und dunklem Modus umschaltet und dessen Wert über document.documentElement.classList die dark Klasse am Wurzelelement setzt, damit Tailwinds dark: Variante greift. Diese Kombination aus Pinia für den Zustand und Tailwind CSS für die visuelle Umsetzung trennt sauber zwischen der Frage, was der aktuelle Zustand ist, und der Frage, wie dieser Zustand aussieht, was gerade in größeren Tailwind CSS Vue 3 Anwendungen die Testbarkeit deutlich verbessert.

9. Composition API versus Options API im Tailwind Kontext

Auch wenn die Options API in Vue 3 weiterhin unterstützt wird, zeigt sich beim Umgang mit Tailwind CSS in Vue 3 ein klarer Unterschied in der Wiederverwendbarkeit von Styling Logik zwischen beiden Ansätzen.

In der Praxis migrieren viele Teams bestehende Options API Komponenten schrittweise, indem sie zunächst nur die Styling relevanten computed Eigenschaften in Composables extrahieren, während der Rest der Komponente vorerst unverändert bleibt. Dieser inkrementelle Ansatz reduziert das Risiko einer vollständigen Neuschreibung und liefert bereits nach kurzer Zeit spürbare Verbesserungen bei der Wiederverwendbarkeit von Tailwind CSS Vue 3 Styling Logik.

10. Zusammenfassung

Tailwind CSS mit Vue 3 und der Composition API ergibt ein Muster, in dem Styling Logik genauso strukturiert werden kann wie fachliche Logik: extrahiert in Composables, typsicher mit TypeScript und über computed Eigenschaften reaktiv an den Komponentenzustand gebunden. Reaktive Klassenlisten, Scoped Slots für flexible Basiskomponenten und die Kombination aus Teleport und Transition für Overlays decken die meisten praktischen Anforderungen ab, ohne zusätzliche Animationsbibliotheken zu benötigen.

Wer neue Tailwind CSS Vue 3 Komponenten entwickelt, sollte von Anfang an Varianten Logik in Composables auslagern statt sie in einzelnen Komponenten zu duplizieren. Diese Investition zahlt sich aus, sobald mehrere Komponenten dieselben visuellen Muster benötigen, und macht spätere Design System Änderungen zu einer einzigen, zentralen Anpassung statt einer Suche über Dutzende Dateien hinweg.

11. FAQ: Tailwind CSS mit Vue 3