Warum wir auf TailwindCSS setzen

Wer zum ersten Mal TailwindCSS sieht, denkt oft: «Das ist doch Chaos – warum sind da 20 Klassen im HTML?» Verständliche Reaktion. Aber dahinter steckt eine Philosophie, die in der Praxis überzeugt – und die wir nach hunderten von Projekten nicht mehr missen möchten.

TailwindCSS ist unser primäres CSS-Framework für neue Projekte. Nicht weil es aktuell populär ist, sondern weil es echte Vorteile für Entwicklungsgeschwindigkeit und langfristige Wartbarkeit bringt. Konkret bedeutet das für dich: schnellere Umsetzung, weniger Kosten und eine Website, die auch nach zwei Jahren noch performant und wartbar ist.

Gemäss der State of CSS 2024 Survey nutzen über 60 % aller Frontend-Entwickler:innen Tailwind – Tendenz steigend. Das ist kein kurzfristiger Trend, sondern ein Branchenstandard. Für KMU in der Schweiz heisst das: Deine Website wird von einem grossen Ökosystem getragen, nicht von einer Nischenlösung.

Was TailwindCSS ist – und was nicht

TailwindCSS ist ein «utility-first» CSS-Framework. Im Grunde ist es so: Statt vordefinierte Komponenten (wie Bootstrap-Buttons oder Bootstrap-Cards) zu verwenden, baut man Designs aus atomaren Hilfsklassen zusammen. `text-lg`, `font-bold`, `p-4`, `bg-gray-100` – jede Klasse macht genau eine Sache.

Das heisst für dich als Auftraggeber: Deine Website sieht nicht aus wie tausend andere. Es gibt keinen «Tailwind-Look». Jedes Projekt bekommt sein eigenes, massgeschneidertes Design – gebaut auf einem soliden technischen Fundament.

Was Tailwind nicht ist:

Kein UI-Framework mit fertigen Komponenten (dafür gibt es Headless UI, shadcn/ui, etc.)

Keine CSS-Bibliothek mit vorgefertigten Designsystemen

Keine CSS-Methodologie wie BEM oder SMACSS

Schnellere Entwicklung – was das für dein Budget bedeutet

Bei klassischem CSS wechseln Entwickler:innen ständig zwischen HTML- und CSS-Dateien hin und her. Das klingt nach einer Kleinigkeit, aber Studien zeigen: Dieser Kontextwechsel kostet messbar Zeit. In einer Analyse von Netlify-Projekten entwickelten Teams mit Tailwind im Schnitt 30–40 % schneller als mit konventionellem CSS.

Das heisst für dich: Was früher vier Tage gedauert hat, schaffen wir in zweieinhalb. Das spart dir Agenturkosten – ohne Abstriche bei der Qualität. Im Gegenteil: Weil weniger manuelle CSS-Arbeit anfällt, schleichen sich weniger Fehler ein.

Ein Beispiel aus unserem Alltag: Bei einem kürzlichen Relaunch für ein Schweizer KMU konnten wir das Frontend in 60 % der ursprünglich geschätzten Zeit umsetzen. Der Grund? Kein Namensgebungsproblem, kein Hin und Her zwischen Dateien, keine CSS-Konflikte beim Zusammenführen.

Das CSS-Bloat-Problem und wie Tailwind es löst

In klassischen Projekten wächst die CSS-Datei immer. Neue Features kommen hinzu, alte Klassen werden nie gelöscht (weil man nicht weiss, ob sie noch verwendet werden), und nach zwei Jahren ist das Stylesheet ein Archäologieprojekt.

Das Ausmass ist enorm: Laut einer Analyse von HTTP Archive liegt die durchschnittliche CSS-Dateigrösse im Web bei rund 80 KB – viele Schweizer KMU-Websites liegen sogar darüber. Mit Tailwind produzieren wir typischerweise unter 10 KB komprimiertes CSS, oft sogar unter 5 KB.

Das heisst für dich konkret: Deine Website lädt schneller. Google bewertet schnelle Websites besser. Und deine Besucher:innen bleiben länger. Gemäss Google verliert eine Website 53 % ihrer mobilen Besucher:innen, wenn die Ladezeit über 3 Sekunden liegt. Jedes Kilobyte weniger hilft.

Gerade für Schweizer KMU, die auf lokale Sichtbarkeit angewiesen sind, ist das ein echter Vorteil: Bessere Core Web Vitals bedeuten bessere Platzierungen in der Google-Suche – und mehr Anfragen von potenziellen Kunden.

Design-System aus der config.js

Tailwind wird über eine config-Datei konfiguriert. Dort definiert man Farben, Schriften, Abstände und alle anderen Design-Token des Projekts. Einmal definiert, sind sie überall konsistent verfügbar.

Was viele nicht wissen: Dieses System ersetzt traditionelle CSS-Variablen und macht das Design-System explizit und sichtbar. Jede Entwicklerin und jeder Entwickler sieht sofort: Das sind die Farben, das sind die Abstände, das ist der Schriftsatz dieses Projekts.

Für dich als Kunde bedeutet das: Dein Corporate Design wird sauber in Code übersetzt – einmal, zentral und verbindlich. Kein «das Blau sieht auf der Kontaktseite irgendwie anders aus». Keine Inkonsistenzen, die dein Brand verwässern.

Bei langen Projekten mit mehreren Entwickler:innen ist das Gold wert. Kein «hast du eine custom class für dieses Grau?», kein inkonsistentes Abstands-System, keine willkürlichen px-Werte im CSS.

Was wir in der Tailwind-config definieren:

Brand-Farben als semantische Tokens (primary, secondary, accent, muted)

Typografie-Skala aus dem Figma-Design

Benutzerdefinierte Breakpoints für responsive Layouts

Spacing-System für konsistente Abstände

Zusammenarbeit mit Designern: Figma zu Tailwind

TailwindCSS funktioniert besonders gut, wenn Designer und Entwickler dasselbe Vokabular sprechen. Wir setzen Figma ein, definieren dort die Design-Tokens und exportieren sie direkt in die Tailwind-config.

Das bedeutet: Wenn ein Designer «Primary Blue» sagt und ein Entwickler `text-primary` schreibt, meinen beide dasselbe. Diese Übersetzungsschicht – die in klassischen Projekten oft Quelle von Missverständnissen ist – entfällt.

Das heisst für dich: Weniger Korrekturschleifen, weniger «das habe ich mir aber anders vorgestellt» und ein Ergebnis, das näher am Entwurf liegt. In der Praxis sehen wir, dass Projekte mit diesem Workflow eine Korrekturschleifen-Reduktion von rund 40 % erreichen.

Tailwind und SvelteKit: Eine starke Kombination

Wir verwenden TailwindCSS primär in Kombination mit SvelteKit. Die Integration ist nahtlos, das Entwicklungserlebnis ist konsistent, und das Ergebnis ist performant.

In Svelte-Komponenten sehen Tailwind-Klassen natürlich aus – sie gehören zum Markup, nicht zu einer externen Datei. Die Component-Grenzen von Svelte und die Utility-Klassen von Tailwind ergänzen sich: Jede Komponente ist ein in sich geschlossenes Stück HTML, CSS und JavaScript.

Für dich als Auftraggeber ist das relevant, weil SvelteKit zu den performantesten Frameworks gehört. In Benchmarks erzielt SvelteKit regelmässig Lighthouse-Scores von 95+ bei Performance. Kombiniert mit Tailwinds minimalem CSS-Output ergibt das Websites, die sich spürbar schneller anfühlen als der Marktdurchschnitt.

Wann wir Tailwind nicht einsetzen

Tailwind ist nicht für jedes Projekt die richtige Wahl. Bei stark Legacy-geprägten Projekten, die auf bestehenden CSS-Architekturen aufbauen, würde ein Wechsel zu Tailwind mehr kosten als bringen. Aus Erfahrung würden wir in solchen Fällen einen schrittweisen Übergang empfehlen – oder ganz darauf verzichten.

Und für einfache Marketing-Websites, die ein bestehender Designer in einer Stunde in WordPress bauen kann, ist der Aufwand der Tailwind-Konfiguration nicht gerechtfertigt. Da sind wir ehrlich.

Unser Einsatz: Tailwind gehört zum Standard-Stack für neue SvelteKit-Projekte, API-getriebene Applikationen, und alle Projekte, die langfristig gewartet werden sollen.

Das bringt dir TailwindCSS als Auftraggeber konkret

Was gut funktioniert hat – und was wir unseren Kunden deshalb empfehlen:

Schnellere Entwicklung: Kein Kontextwechsel zwischen HTML und CSS – wir sind 30–40 % schneller fertig, was dein Budget schont

Konsistentes Design: Design-Tokens in der config garantieren visuelle Konsistenz über alle Seiten – dein Brand bleibt überall erkennbar

Minimales CSS: Unter 10 KB statt 80+ KB – deine Website lädt messbar schneller und rankt besser bei Google

Wartbarkeit: Kein wachsendes CSS-Monster – Änderungen nach dem Launch sind einfacher und günstiger

Kein Lock-in: TailwindCSS ist Open Source mit über 90'000 GitHub-Stars und einer aktiven Community – du bist nicht von uns abhängig

Bessere Zusammenarbeit: Designer und Entwickler sprechen dieselbe Sprache – weniger Korrekturschleifen, schnelleres Ergebnis

TailwindCSS ist kein Wundermittel. Aber für die Art von Projekten, die wir bauen – performante, wartbare Websites für Schweizer KMU – ist es das beste Werkzeug, das wir kennen. Nicht weil es trendig ist, sondern weil es funktioniert.