Tailwind CSS v4 IntelliSense für `.eta`-Dateien in VS Code aktivieren

Mit der Veröffentlichung von Tailwind CSS v4 hat sich einiges geändert – unter anderem die Art, wie Konfiguration und Styles gehandhabt werden. Wenn du .eta-Dateien (eta-Templates) verwendest, bekommst du möglicherweise keine IntelliSense-Unterstützung in VS Code. Hier zeige ich dir, wie du das behebst.

Voraussetzungen

• VS Code installiert
• Tailwind CSS v4 korrekt eingerichtet
• Tailwind CSS IntelliSense Extension installiert 👉 Hier herunterladen

Schritt 1: .vscode/settings.json konfigurieren

Erstelle oder bearbeite die Datei .vscode/settings.json in deinem Projektordner und füge Folgendes hinzu:

1{
2  "tailwindCSS.includeLanguages": {
3    "eta": "html"
4  },
5  "tailwindCSS.experimental.configFile": "src/styles/styles.css"
6}

• includeLanguages: Sagt VS Code, dass .eta-Dateien wie HTML behandelt werden sollen.
• experimental.configFile: Zeigt auf deine zentrale Tailwind-CSS-Datei (z. B. styles.css), in der du Tailwind importierst.

Schritt 2: Tailwind in styles.css importieren

In Tailwind v4 sieht deine zentrale CSS-Datei typischerweise so aus:

1@import "tailwindcss";

Optional kannst du auch Plugins oder Custom Styles hinzufügen:

1@import "tailwindcss";
2@import "./custom.css";

Schritt 3: tailwind.config.js anpassen

Stelle sicher, dass deine .eta-Dateien im content-Array enthalten sind:

1export default {
2  content: ["./views/**/*.eta", "./src/**/*.js"],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

Schritt 4: VS Code neu starten

Nach den Änderungen solltest du VS Code neu starten, damit die IntelliSense-Erweiterung die neuen Einstellungen erkennt. Das ist nicht immer erforderlich, aber in diesem Fall ist es ratsam.

Jetzt solltest du in .eta-Dateien:

• Autovervollständigung für Tailwind-Klassen erhalten
• Hover-Informationen und Vorschauen sehen
• Fehler bei ungültigen Klassen erkennen

Viel Spaß beim Coden mit Tailwind v4 und Eta! 🎨✨