adityawahyudi-dev/ft_adit

Tailwind CSS Entwicklung

Dokumentation

Verwende search-docs für detaillierte Tailwind CSS v4 Muster und Dokumentation.

Grundlegende Nutzung

• Verwende Tailwind CSS-Klassen, um HTML zu stylen. Prüfe und befolge vorhandene Tailwind-Konventionen im Projekt, bevor du neue Muster einführst.
• Biete an, wiederholte Muster in Komponenten zu extrahieren, die den Projektkonventionen entsprechen (z. B. Blade, JSX, Vue).
• Berücksichtige Klassenplatzierung, -reihenfolge, -priorität und Standardwerte. Entferne redundante Klassen, füge Klassen vorsichtig zu übergeordneten oder untergeordneten Elementen hinzu, um Wiederholungen zu reduzieren, und gruppiere Elemente logisch.

Tailwind CSS v4 Spezifika

• Verwende stets Tailwind CSS v4 und vermeide veraltete Utilities.
• corePlugins wird in Tailwind v4 nicht unterstützt.

CSS-First Konfiguration

In Tailwind v4 erfolgt die Konfiguration CSS-First mit der @theme-Direktive – es wird keine separate tailwind.config.js-Datei benötigt:

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Import-Syntax

In Tailwind v4 importiere Tailwind mit einer normalen CSS @import-Anweisung anstelle der @tailwind-Direktiven aus v3:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Ersetzte Utilities

Tailwind v4 hat veraltete Utilities entfernt. Verwende die unten gezeigten Ersetzungen. Bei Opacity entferne die Klasse *-opacity-* und füge den Wert als Modifikator an die vorhandene Farbe an: bg-blue-500 bg-opacity-50 wird zu bg-blue-500/50, text-white text-opacity-75 wird zu text-white/75.

Veraltet	Ersatz
bg-opacity-*	bg-{farbe}/*
text-opacity-*	text-{farbe}/*
border-opacity-*	border-{farbe}/*
divide-opacity-*	divide-{farbe}/*
ring-opacity-*	ring-{farbe}/*
placeholder-opacity-*	placeholder-{farbe}/*
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

Abstände

Verwende gap-Utilities anstelle von Margins für Abstände zwischen Geschwisterelementen:

<div class="flex gap-8">
    <div>Element 1</div>
    <div>Element 2</div>
</div>

Dark Mode

Wenn vorhandene Seiten und Komponenten den Dark Mode unterstützen, müssen neue Seiten und Komponenten ihn auf die gleiche Weise unterstützen, typischerweise mit der dark:-Variante:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Inhalt passt sich dem Farbschema an
</div>

Häufige Fehler

• Verwendung veralteter v3-Utilities (bg-opacity-, flex-shrink-, etc.)
• Verwendung von @tailwind-Direktiven anstelle von @import "tailwindcss"
• Versuch, tailwind.config.js anstelle der CSS @theme-Direktive zu verwenden
• Verwendung von Margins für Abstände zwischen Geschwisterelementen anstelle von gap-Utilities
• Vergessen, Dark-Mode-Varianten hinzuzufügen, wenn das Projekt Dark Mode verwendet