Tailwind Merge in TYPO3 Fluid: CSS-Klassen sauber zusammenführen

Wer mit Tailwind CSS in TYPO3 Fluid arbeitet, kennt das Problem: Komponenten brauchen feste Basis-Klassen, sollen aber trotzdem flexibel bleiben.

Ein Button, eine Badge oder eine Card bringt ein Grundlayout mit. Gleichzeitig kommen Varianten, Zustände und zusätzliche Klassen von außen dazu. Schnell entstehen doppelte oder widersprüchliche CSS-Klassen wie rounded-sm rounded-full, p-2 p-4 oder bg-gray-100 bg-gray-900.

Genau dafür haben wir einen eigenen Tailwind Merge ViewHelper für TYPO3 implementiert. Er übernimmt in Fluid im Prinzip die gleiche Aufgabe wie die bekannte cn()-Funktion aus React-Projekten: CSS-Klassen werden zusammengesetzt, bereinigt und bei Konflikten sinnvoll aufgelöst. Aus mehreren Class-Strings wird ein sauberer finaler Class-String.

Tailwind lebt davon, dass Styling direkt über Utility Classes gesteuert wird. Das macht Komponenten schnell, klar und nah am Markup. In statischen Templates funktioniert das sehr gut. In einem CMS wie TYPO3 wird es aber dynamischer.

Fluid-Partials werden mehrfach verwendet. Redakteur:innen-Kontexte unterscheiden sich. Varianten kommen hinzu. Klassen werden von außen übergeben. Ohne klare Merge-Logik wächst der class-String immer weiter und die Reihenfolge entscheidet darüber, welche Klasse am Ende greift.

Der Tailwind Merge ViewHelper löst genau dieses Problem. Die Komponente behält eine stabile Basis. Zusätzliche Klassen können bewusst ergänzen oder überschreiben. Das Template bleibt lesbar und die CSS-Ausgabe bleibt kontrollierbar.

Der größte Nutzen liegt nicht im einzelnen class-Attribut. Der Nutzen liegt in der Arbeit am System. Wiederverwendbare Fluid-Partials bleiben stabil, ohne starr zu werden. Komponenten können in mehreren Bereichen genutzt und trotzdem kontextabhängig erweitert werden. Das reduziert doppelte Templates und verhindert unklare Klassenketten.

Für Entwickler:innen wird die Arbeit einfacher, weil Komponenten eine klare Schnittstelle bekommen. base ist die definierte Grundlage. add ist die bewusste Erweiterung. Konflikte werden nicht im Kopf gelöst, sondern technisch sauber behandelt.

Gerade in größeren TYPO3-Projekten zahlt sich das aus. Wenn viele Komponenten, Varianten und Templates zusammenkommen, braucht das Frontend Struktur. Ein Tailwind Merge ViewHelper für TYPO3 Fluid ist dafür keine große Oberfläche, aber eine klare technische Entscheidung. Er macht CSS-Klassen steuerbarer, Templates lesbarer und Komponenten wartbarer.