Tag: Tailwind 4

1. Tailwind CSS responsive Tabellen: mobil-optimierte Layouts

   23.10.2025

   Tabellen auf Mobilgeräten horizontal zu scrollen ist keine Lösung – es ist Resignation. Mit Tailwind CSS responsive Tabellen richtig umzusetzen bedeutet: auf dem Smartphone ein Card-Layout, auf dem Desktop eine vollständige Tabelle, mit sticky Spalten, sortierbaren Kopfzeilen und kollabierbaren Zeilen für Detailansichten.

   Read more

2. Tailwind Komponenten-Bibliothek aufbauen: Wiederverwendbare UI ohne CSS-Chaos

   23.10.2025

   Tailwind CSS verleitet zu duplizierten Klassen-Strings in jedem Template. Eine sauber strukturierte Tailwind Komponenten-Bibliothek mit @layer components, CVA für Varianten und Design-Tokens als Single Source of Truth löst dieses Problem nachhaltig – ohne auf Utility-First-Vorteile zu verzichten.

   Read more

3. Hyvä CMS Block Styling Konventionen mit Tailwind CSS

   17.10.2025

   CMS Blöcke in Magento werden von Redakteuren im WYSIWYG bearbeitet, nicht von Entwicklern in phtml Dateien. Ohne feste Hyvä CMS Block Styling Konventionen entstehen inkonsistente Layouts, kaputte Utility-Klassen, die vom Tailwind JIT Compiler nie generiert wurden, und CSP-Verletzungen durch Inline-Styles. Ein kleines, dokumentiertes Klassen-Set löst dieses Problem dauerhaft.

   Read more

4. PDF-Rechnungen mit Tailwind CSS: Dompdf und wkhtmltopdf im Vergleich

   12.10.2025

   Wer Rechnungen aus einer PHP-Anwendung ohne Node.js-Abhängigkeit als PDF erzeugen will, landet fast immer bei Dompdf oder wkhtmltopdf. Beide Bibliotheken unterstützen nur einen Teil der CSS-Funktionen, die eine Tailwind-Vorlage im Browser nutzt, weshalb Rechnungslayouts bewusst auf Tabellen statt Flexbox aufgebaut werden müssen.

   Read more

5. Tailwind CSS Prefix: Drittanbieter-CSS konfliktfrei integrieren

   10.10.2025

   Wenn Tailwind CSS auf Bootstrap, Bulma oder gewachsenes Legacy-CSS trifft, überschreiben sich gleichnamige Klassen gegenseitig. Die Tailwind CSS Prefix-Option löst dieses Problem mit minimaler Konfiguration und maximaler Isolierung – dieser Artikel erklärt, wie und wann man sie einsetzt.

   Read more

6. Tailwind CSS focus-visible: Barrierefreie Fokus-Stile ohne visuelle Störungen

   05.10.2025

   Das Entfernen von Fokusringen wegen ästhetischer Bedenken ist einer der häufigsten Barrierefreiheitsfehler im Web. Die CSS-Pseudoklasse focus-visible und die gleichnamige Tailwind-CSS-Variante lösen das Dilemma: Tastaturnutzer sehen klare Indikatoren, Mausnutzer werden nicht gestört.

   Read more

7. Divide und Space Between Utilities in Tailwind CSS im Detail

   26.09.2025

   Divide und Space Between Utilities lösen ein spezifisches Problem, das gap allein nicht abdeckt: sichtbare Trennlinien zwischen Geschwisterelementen und Abstände in Layout-Kontexten ohne native Flex- oder Grid-Unterstützung. Wer versteht, wie divide-x, divide-y, space-x und space-y intern funktionieren, vermeidet unnötige Wrapper-Divs und wählt für jeden Anwendungsfall das passende Werkzeug.

   Read more

8. Kanban-Board Styling-Muster mit Tailwind CSS

   23.09.2025

   Ein gutes Kanban-Board lebt von klaren Spaltengrenzen, gut lesbaren Karten und sichtbarem Feedback während des Ziehens. Mit Tailwind CSS für Layout und Zustände sowie Alpine.js für Drag-and-drop-Interaktion entsteht ein Board, das auch bei vielen Karten und Spalten übersichtlich bleibt.

   Read more

9. Tailwind Hero Sections: 10 Varianten für starke Einstiegsseiten

   11.09.2025

   Die Hero Section entscheidet in den ersten drei Sekunden, ob ein Besucher bleibt oder geht. Dieser Artikel zeigt zehn konkrete Tailwind CSS Hero-Varianten – von einfachen Gradients bis zu Video-Hintergründen und Glassmorphism – mit vollständigem Code und Design-Begründung.

   Read more

10. Barrierefreie Formulare mit Tailwind CSS: Labels, Fehlermeldungen und Fieldsets richtig gestalten

    10.09.2025

    Ein Formular, das nur visuell gut aussieht, aber für Screenreader stumm bleibt, kostet Nutzer und Umsatz. Barrierefreie Formulare mit Tailwind CSS verbinden Labels korrekt, verknüpfen Fehlermeldungen über aria-describedby und gruppieren zusammengehörige Felder mit fieldset und legend.

    Read more