Utility-First: Wie Tailwind meinen Workflow veränderte

Ich habe Tailwind lange skeptisch beäugt. Klassennamen wie flex items-center px-4 direkt ins HTML zu schreiben, fühlte sich an wie ein Rückschritt in die Zeit von Inline-Styles. Heute, mit der frisch erschienenen Version 2.0, gehört es zu den Werkzeugen, die meinen Arbeitstag spürbar verändert haben. Manchmal muss man eine Idee erst benutzen, um sie zu verstehen.

Das Ende des Namens-Erfindens

Der größte Gewinn ist unerwartet banal: Ich muss keine Klassennamen mehr erfinden. Kein .card__header--highlighted mehr, kein Grübeln über BEM-Konventionen, kein Hin- und Herspringen zwischen HTML und Stylesheet. Ich gestalte dort, wo das Markup steht.

Das klingt klein, ist aber befreiend. Der mentale Kontextwechsel zwischen Struktur und Stil fällt weg, und ich bleibe im Fluss. Eine Idee landet in Sekunden auf dem Bildschirm, statt erst durch zwei Dateien zu wandern.

Utility-First heißt nicht, kein System zu haben. Es heißt, das System in Einschränkungen zu gießen statt in Namen.

Konsistenz durch Tokens

Was mich wirklich überzeugt hat, ist die tailwind.config.js. Dort definiere ich einmal meine Farbpalette, meine Abstände, meine Schriftgrößen — und ab dann gibt es keine willkürlichen 13px oder #3a3a3c mehr im Projekt.

module.exports = {
  theme: {
    extend: {
      colors: { ink: "#1a1a1a", sand: "#e8e2d8" },
      spacing: { 18: "4.5rem" },
    },
  },
};

Die Einschränkung auf eine feste Skala ist kein Korsett, sondern ein Geländer. Designs werden automatisch stimmiger, weil das System schlechte Entscheidungen schwerer macht. Genau diese eingebaute Disziplin schätze ich als Gestalter am meisten.

Wo ich aufpasse

Verdichtetes Markup kann unübersichtlich werden. Wiederholt sich ein Muster, ziehe ich es in eine echte Komponente — in React, Vue oder per @apply. Tailwind ersetzt nicht das Denken in Komponenten, es beschleunigt nur den Weg dorthin.

Skeptisch bin ich geblieben, was Dogmatismus angeht: Utility-First ist ein Werkzeug, keine Religion. Aber für die schnelle, präzise Iteration zwischen erstem Entwurf und fertigem Interface kenne ich aktuell nichts Besseres. Tailwind hat mir die Freude am direkten Gestalten im Browser zurückgegeben.