@apply ist eines der kontroversesten Features in Tailwind CSS. Zu Unrecht pauschal verurteilt, zu schnell unbedacht eingesetzt. Dieser Artikel zeigt genau, wann @apply echten Mehrwert liefert, wann es den Utility-First-Ansatz unterläuft und welche sauberen Alternativen den Architektur-Kompromiss vermeiden.
Wer Farben, Abstände und Typografie manuell zwischen Figma und Tailwind CSS synchronisiert, schafft Inkonsistenzen und Mehrarbeit. Design Tokens als Single Source of Truth verbinden Figma Variables direkt mit Tailwind CSS v4 – automatisch, skalierbar und Multi-Theme-fähig.
Tailwind CSS 4 in Hyvä Theme vollständig erklärt
@theme, @layer, @utility und :root – alle fünf CSS-Direktiven praxisnah erklärt. Verstehe den CSS-First-Ansatz und vermeide die häufigsten Fehler in Magento 2 Hyvä Theme Projekten.
Cards sind das universellste UI-Pattern im Web. Gleichzeitig entstehen in Tailwind-Projekten ohne Card-System schnell Dutzende verschiedener Card-Implementierungen – jede etwas anders, keine wirklich wiederverwendbar. Dieser Artikel zeigt, wie man mit Tailwind CSS ein vollständiges Card-System mit allen wichtigen Varianten aufbaut.
Weihnachtsfarben, die im Januar noch im Code herumliegen, oder ein Black-Friday-Banner, das jemand manuell wieder entfernen muss: Copy-Paste-Anpassungen für saisonale Kampagnen hinterlassen dauerhaften Aufräumbedarf. Eine eigene CSS-Schicht mit zeitgesteuerter Aktivierung löst das Problem strukturell und baut sich nach Kampagnenende von selbst zurück.
Utility-Klassen aus Tailwind CSS werden von den meisten E-Mail-Clients ignoriert, weil externe Stylesheets im Postfach nicht ankommen. Eine Build-Pipeline, die Tailwind kompiliert und die erzeugten Regeln automatisch als Inline Styles in jedes HTML-Element schreibt, löst dieses Problem ohne manuellen Zusatzaufwand.
Eine Datentabelle mit hunderten Zeilen entscheidet über die Produktivität eines ganzen Teams. Wer Tailwind CSS Datentabellen ohne Zebra Muster, Sticky Header und klare Sortierindikatoren baut, zwingt Nutzer dazu, Zeile für Zeile mit dem Finger auf dem Bildschirm mitzuzählen. Dieser Artikel zeigt konkrete Styling Muster für Datentabellen, die auch bei großen Datenmengen scanbar bleiben.
Tailwind CSS v4 ist keine inkrementelle Verbesserung, sondern eine komplette Neuarchitektur. Die Oxide-Engine ersetzt den Node.js-basierten Build-Prozess durch eine Rust-native Implementierung, @theme ersetzt tailwind.config.js und der CSS-First-Ansatz verändert grundlegend, wie Tailwind konfiguriert wird.
Icons sind in jedem UI omnipräsent – und werden trotzdem häufig falsch eingesetzt. Zu groß, falsche Farbe, nicht barrierefrei, als PNG statt SVG. Dieser Guide zeigt, wie man Heroicons, Phosphor Icons und Inline-SVG mit Tailwind CSS v4 korrekt und performant einsetzt.
Die Standard Spacing Skala von Tailwind deckt viele Projekte gut ab, stößt aber bei eigenen Designsystemen schnell an Grenzen. Wer die Tailwind Spacing Skala mit @theme in Tailwind v4 gezielt erweitert, statt beliebige Pixelwerte einzustreuen, bekommt ein Abstandssystem, das über Buttons, Karten und ganze Seiten hinweg konsistent bleibt.