Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Tailwind CSS

Definition: Tailwind CSS ist ein Utility-First-CSS-Framework das statt vorgefertigter UI-Komponenten (wie Bootstrap) eine Bibliothek atomarer Hilfsklassen (Utilities) bereitstellt aus denen individuelle Designs direkt im HTML-Markup aufgebaut werden – ohne eigene CSS-Dateien schreiben zu müssen. Entwickelt von Adam Wathan (Tailwind Labs; Calgary; Kanada; erste öffentliche Version Oktober 2017; tailwindcss.com); Tailwind CSS v3 (Dezember 2021) mit JIT-Compiler (Just-in-Time); Tailwind CSS v4 (2025) mit komplett überarbeitetem Engine auf Basis von Oxide. Utility-First-Beispiel: statt einer semantischen Klasse «.card» die alle Styles enthält werden direkte Utility-Klassen im HTML verwendet: <div class="rounded-lg shadow-md bg-white p-6 flex flex-col gap-4"> – jede Klasse macht genau eine Sache; rounded-lg = border-radius: 8px; shadow-md = vordefinierter Box-Shadow; bg-white = background: white; p-6 = padding: 1.5rem (24px); flex = display: flex; gap-4 = gap: 1rem (16px). Tailwind-Kernkonzepte: Spacing-Scale (Basis 4px/0.25rem; t-shirt-sizing: 1=4px; 2=8px; 4=16px; 6=24px; 8=32px; 12=48px; 16=64px); Color-Palette (10 Helligkeitsstufen pro Farbe: 50–950; z.B. blue-500 = #3B82F6); Responsive-Modifiers (sm:md:lg:xl:2xl: Breakpoints; mobile-first: sm = 640px+; md = 768px+; lg = 1024px+); State-Modifiers (hover: focus: active: disabled: first: last:); Dark-Mode-Modifier (dark:); Design-Token-Konfiguration via tailwind.config.js; @apply-Direktive für CSS-Extraktion; Arbitrary Values für einmalige Werte außerhalb der Scale (w-[347px]).

Erläuterung

Adam Wathan (Calgary; Kanada; Softwareentwickler und Autor; «Refactoring to Collections», 2016; Tailwind CSS; Adam Wathan/Steve Schoger/Jonathan Reinink; Open Source; erste Version November 2017) entwickelte Tailwind CSS als Reaktion auf Frustrationen mit traditionellen CSS-Methodologien: Wathan beschrieb in seinem vielzitierten Essay «CSS Utility Classes and "Separation of Concerns"» (adamwathan.me; 2017) die Probleme semantischer CSS-Klassen – Klassen wie «.author-bio» oder «.card» führen zu dem Problem dass CSS und HTML gegenseitig von einander abhängig werden; bei Anforderungsänderungen muss CSS für jeden Edge Case erweitert werden; die Alternative – Utility-Klassen direkt im HTML – löst diese Kopplung. Die Utility-First-Idee war nicht neu: Basscss (Brent Jackson; 2013) und Tachyons (Adam Morse/John Otander; 2014) vertraten denselben Ansatz; Tailwind unterschied sich durch sein systematisches Design-Token-System und die Konfigurierbarkeit. Mark Otto (San Francisco; CA; dann GitHub) und Jacob Thornton (GitHub; San Francisco; CA) hatten mit Bootstrap (Twitter Bootstrap; August 2011; getbootstrap.com) den komponentenbasierten Ansatz dominiert: Bootstrap liefert fertige Komponenten (Navbar, Card, Modal, Badge) mit vordefinierten Styles; Tailwind liefert keine fertigen Komponenten sondern die Bausteine; dieses fundamentale Design-Philosophie-Gegensatz erklärt warum beide Frameworks coexistieren und warum Teams je nach Anforderungen unterschiedliche Entscheidungen treffen. Steve Schoger (Hamilton; Kanada; Designer; steve.schoger.com) co-entwickelte Tailwind CSS und dokumentierte visuelle Design-Prinzipien im E-Book «Refactoring UI» (Adam Wathan/Steve Schoger; 2018; refactoringui.com; $79; über 100.000 Exemplare verkauft): das Buch demonstrierte wie Tailwind's systematische Spacing- und Color-Scales direkt aus Design-Prinzipien abgeleitet wurden; es wurde zur kombinierten Lernressource für Entwickler die Design lernen wollten und zum Marketing-Werkzeug für Tailwind. Der JIT-Compiler (Just-in-Time; Tailwind CSS v2.1; April 2021; dann Standard in v3; Dezember 2021) löste das wichtigste Performance-Problem von Tailwind: im traditionellen Ansatz enthielt Tailwind alle möglichen Klassen (~4MB unkomprimiert) und PurgeCSS (durch einen Build-Schritt) entfernte ungenutzte Klassen im Production-Build; mit JIT werden Klassen on-demand generiert wenn sie im Code entdeckt werden; dadurch auch Arbitrary Values möglich: w-[347px] generiert eine Klasse mit exakt dieser Breite – nicht möglich mit vorgenerierten Klassen; Bundle-Größe: typisches Tailwind-Produktionsbundle 5–20KB komprimiert (verglichen mit Bootstrap 30–40KB); der JIT-Compiler ermöglicht auch Kombinationen: hover:bg-blue-500/50 (50% Opazität der Hoverfarbe); dark:text-slate-300/80; jede denkbare Kombination wird dynamisch generiert. Tailwind Labs Inc. (Adam Wathan; gegründet 2019; Calgary; Kanada dann Vancouver; Kanada) monetarisiert Tailwind CSS über Tailwind UI (tailwindui.com; $299 für alle Komponenten-Kits; React/Vue/HTML-Varianten; 500+ vorgefertigte Komponenten und Templates; über $2 Mio. Revenue in ersten 6 Monaten laut Adam Wathan's öffentlichem Tweet) während Tailwind CSS selbst MIT-lizenziert und kostenlos bleibt; Headless UI (headlessui.com; Tailwind Labs; 2020) als komplementäres Library für zugängliche, unstyled UI-Komponenten (Dropdown, Modal, Listbox) die mit Tailwind gestyled werden.

Tailwind-Kernkonzepte und Konfiguration

Tailwind-Ökosystem und Framework-Integration

Praxistipp: Der häufigste Tailwind-Fehler ist das übermäßige Einsatz von @apply um CSS-Klassen zu bauen die «sauberer» aussehen. Widersetzen Sie sich diesem Impuls: Tailwind's eigentlicher Vorteil liegt im Markup selbst – wenn Sie einen Button definieren, abstrahieren Sie ihn als React/Vue-Komponente, nicht als CSS-Klasse. Eine <Button variant="primary">-Komponente mit Tailwind-Klassen ist wartbarer als eine .btn-primary-CSS-Klasse die Tailwind-@apply verwendet, weil die Komponente in Ihrer IDE auffindbar, typisierbar und testbar ist. Zweiter konkreter Tipp: Installieren Sie von Beginn an das Prettier-Plugin für Tailwind (prettier-plugin-tailwindcss) – die automatische Klassen-Sortierung verhindert den wichtigsten Review-Feedback-Grund «falsche Reihenfolge der Klassen».