Tailwind v4 + Vite: 5-Minuten-Setup-Vorlage und Verzeichnisstruktur

Letztes Jahr habe ich in einem neuen Projekt Tailwind eingerichtet – eine halbe Stunde lang habe ich an den content-Pfaden in tailwind.config.js herumgefeilt. Damals dachte ich: Geht das nicht einfacher?

Tailwind v4 macht es jetzt wirklich einfacher.

Sie brauchen nur drei Zeilen Code für ein vollständiges Tailwind-Projekt – ohne PostCSS-Konfiguration, ohne tailwind.config.js, ohne manuelle Content-Scan-Pfade. Als ich das zum ersten Mal sah, war ich ehrlich gesagt skeptisch.

Dieser Artikel erspart Ihnen diese halbe Stunde. Ich liefere eine komplette Vorlage plus eine Verzeichnisstruktur, die ich seit einem halben Jahr im Alltag nutze.

1. Warum Tailwind v4 + Vite?

1.1 Ist v4 wirklich so schnell?

Der Hersteller spricht von einer 10-fachen Build-Beschleunigung. In meinem Test sank ein mittelgroßes Projekt von 8 Sekunden auf unter 1 Sekunde. Hauptgrund: die neue Oxide-Engine – in Rust geschrieben, da braucht man nicht viel zu sagen.

Noch wichtiger finde ich die Vereinfachung. Früher musste ich bei jedem neuen Tailwind-Projekt drei oder vier Dateien anfassen: tailwind.config.js, postcss.config.js, Vite-Konfiguration und @tailwind-Direktiven in der CSS-Datei. Jetzt? Eine Datei reicht.

1.2 Vites Geschwindigkeit ist kein Marketing

Der Vite-Dev-Server startet praktisch sofort. Hot Module Replacement (HMR) ist ebenfalls sehr schnell – CSS-Änderungen spüren Sie kaum als Verzögerung. Wer einmal damit entwickelt hat, will selten zurück.

1.3 v3 vs. v4: der direkte Vergleich

Zuerst die Tabelle:

Der Kern: v4 verlagert Konfiguration von JS nach CSS. Sie passen Theme und Styles an einem Ort an – ohne zwischen Dateien zu springen.

Vultr - Hochleistungs-NVMe-Cloud-Server mit 32 Standorten weltweit, Docker per Klick

Preise ansehen →Anzeige

2. 5-Minuten-Schnellstart

Los geht’s.

2.1 Projekt initialisieren

Terminal öffnen und ausführen:

# Neues Vite-Projekt mit TypeScript-Vorlage
npm create vite@latest my-project -- --template vanilla-ts

# In Projektverzeichnis wechseln
cd my-project

# Abhängigkeiten installieren
npm install

Das dauert etwa 30 Sekunden.

2.2 Tailwind v4 installieren

# Tailwind CSS und offizielles Vite-Plugin
npm install tailwindcss @tailwindcss/vite

Nur diese Zeile. Kein PostCSS, kein Autoprefixer – v4 bringt beides mit.

2.3 Vite konfigurieren

vite.config.ts so anpassen:

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  // Tailwind-Plugin eintragen – fertig
  plugins: [tailwindcss()],
})

Drei Zeilen. Wirklich so einfach.

2.4 CSS-Datei anlegen

Unter src/styles/ die Datei main.css erstellen:

/* src/styles/main.css */

/* Tailwind einbinden – eine Zeile für alle Basis-Styles */
@import "tailwindcss";

/* Optionale Theme-Anpassung */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
}

Der @theme-Block ist v4-Neuheit. Farben, Schriften, Abstände usw. definieren Sie als CSS-Variablen – deutlich klarer als früher in tailwind.config.js.

2.5 CSS importieren

In src/main.ts oben ergänzen:

// src/main.ts
import './styles/main.css'

// Ihr bestehender Code …

2.6 Testen

In index.html oder einer Komponente:

<div class="bg-primary text-white p-4 rounded-lg">
  Tailwind v4 läuft!
</div>

Dann:

npm run dev

Im Browser eine Karte mit blauem Hintergrund? Dann hat’s geklappt. Gemessen habe ich: wirklich unter 5 Minuten.

3. Empfohlene Verzeichnisstruktur

Wenn das Projekt läuft, empfehle ich diese Gliederung:

🔥 Verschwende keine Monate für ungenutzte Produkte! Teste deine SaaS-Nutzenversprechen mit Adsterra bei kleinem Budget →

Jetzt testen →Anzeige

3.1 Vollständige Struktur

my-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── ui/              # Basis-UI-Komponenten
│   │   │   ├── Button.ts
│   │   │   └── Input.ts
│   │   └── layout/           # Layout-Komponenten
│   │       ├── Header.ts
│   │       └── Footer.ts
│   ├── styles/
│   │   ├── main.css         # Einstieg (Tailwind-Import)
│   │   ├── components.css   # Komponenten-Styles
│   │   └── utilities.css    # Eigene Utility-Klassen
│   ├── utils/
│   │   └── helpers.ts
│   ├── pages/               # Seiten (Multi-Page)
│   ├── assets/              # Statische Assets
│   │   ├── images/
│   │   └── fonts/
│   ├── main.ts
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

3.2 Warum so aufteilen?

components/ui/ – wiederverwendbare Bausteine: Buttons, Inputs, Modals. Stark wiederverwendbar, ohne Business-Logik.

components/layout/ – Seitenrahmen: Header, Footer, Sidebar. Andere Rolle als UI-Komponenten.

styles/ – CSS zentral. Mit v4 liegt die Konfiguration in CSS; alles an einem Ort ist praktischer.

utils/ – Hilfsfunktionen: Datumsformatierung, String-Verarbeitung usw.

3.3 CSS-Dateien organisieren

/* src/styles/main.css — Einstieg */

/* Tailwind */
@import "tailwindcss";

/* Weitere Stylesheets */
@import "./components.css";
@import "./utilities.css";

/* Globale Basis-Styles */
@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }

  /* Standard-Link-Stil */
  a {
    @apply text-primary hover:underline;
  }
}

@layer base ist Tailwinds Schichtenmodell für Grundstyles. Vorteil gegenüber barem body { … }: Tailwind regelt die Spezifität mit.

4. v3-Migrations-Checkliste

Bestehendes v3-Projekt? Diese Liste habe ich bei mehreren Upgrades genutzt – Stolpersteine sind markiert.

4.1 Konfigurationsdateien

• tailwind.config.js löschen (wenn nur Tailwind drin steht)
• postcss.config.js löschen (wenn nur für Tailwind)
• In CSS: @import "tailwindcss" ergänzen
• vite.config.ts: Plugin auf @tailwindcss/vite umstellen

4.2 Abhängigkeiten

# Alte Pakete entfernen
npm uninstall postcss autoprefixer tailwindcss

# Neue Pakete installieren
npm install tailwindcss @tailwindcss/vite

• Deinstallationsbefehl ausführen
• Installationsbefehl ausführen
• package.json auf Versionen prüfen

4.3 Styles anpassen

• @tailwind base; @tailwind components; @tailwind utilities; durch @import "tailwindcss"; ersetzen
• Theme aus tailwind.config.js in @theme-Block in CSS überführen
• Eigene Utilities weiterhin testen

Theme-Migration – Beispiel:

/* v3: tailwind.config.js */
module.exports = {
  theme: {
    colors: {
      primary: '#3b82f6',
    }
  }
}

/* v4: main.css */
@theme {
  --color-primary: #3b82f6;
}

4.4 Tests

• npm run dev – Dev-Umgebung OK?
• npm run build – Produktions-Build OK?
• Seite öffnen – Styles vollständig?
• CSS ändern – HMR aktiv?

5. Häufige Probleme und Lösungen

Beim Upgrade und Setup treten meist dieselben Fragen auf.

5.1 Styles greifen nicht

Sie setzen class="bg-primary", die Seite bleibt weiß.

Debug-Reihenfolge:

1. DevTools: CSS-Datei geladen?
2. Steht import './styles/main.css' wirklich in main.ts?
3. Vite-Plugin in vite.config.ts korrekt?

Mir passierte das schon – vergessener Import in main.ts. Banal, aber häufig.

KiloClaw - Managed OpenClaw für Unternehmen: AI-Agent-Orchestrierung und smartes Modell-Routing

Jetzt starten →Anzeige

5.2 HMR reagiert nicht

CSS geändert, Seite unverändert.

Debug-Reihenfolge:

1. Vite-Version >= 5.0? (ältere Versionen: Kompatibilitätsprobleme)
2. Dev-Server neu starten
3. Browser-Cache leeren oder Inkognito-Fenster

Wenn es weiter hakt: Konsole auf Fehler prüfen – manchmal kollidiert ein anderes Plugin.

5.3 CSS-Bundle in Produktion zu groß

Nach dem Build: CSS mit mehreren hundert KB.

Debug-Reihenfolge:

1. Aktuelle v4-Version? Ältere Tree-Shaking-Qualität war schwächer
2. Ganze Icon-Bibliotheken oder schwere Dependencies importiert?
3. Styles in @layer schichten – bessere Priorität und Deduplizierung

Meist ist v4-Output schon schlank. Bleibt es groß, liegt es oft an viel eigenem CSS.

Zusammenfassung

Kurz die Kernschritte:

1. Installation: npm install tailwindcss @tailwindcss/vite
2. Vite: Plugin tailwindcss() eintragen
3. CSS: @import "tailwindcss" + @theme für Theme
4. Start: npm run dev

Der größte v4-Sprung: Konfiguration von JS nach CSS. Am Anfang ungewohnt – nach einer Weile wirkt es natürlicher: Styles und Theme an einem Ort, ohne Datei-Hopping.

Bei v3-Migration: Theme aus tailwind.config.js in @theme-Syntax übertragen. Das kostet Zeit, liefert aber schnellere Builds und schlankere Struktur – lohnt sich.