Fluide Größen mit beliebigen Werten in Tailwind
Tailwind erlaubt jeden CSS-Wert in eckigen Klammern. Da Leerzeichen Klassen trennen, werden Leerzeichen im Wert als Unterstriche geschrieben, die Tailwind beim Erzeugen des CSS zurückwandelt. Der Rechner erledigt das für dich und erzeugt eine Klasse wie text-[clamp(1rem,0.8333rem_+_0.8333vw,1.5rem)]. Die Unterstriche um das Pluszeichen sind wichtig: CSS verlangt Leerzeichen um + und − in mathematischen Funktionen.
Ab ins Theme
Beliebige Klassen sind ideal für einzelne Überschriften. Taucht dieselbe Größe an vielen Stellen auf, gehört sie ins Theme. In Tailwind v4 fügst du im @theme-Block eine Variable wie --text-fluid-lg: clamp(…) hinzu und kannst überall text-fluid-lg verwenden. In Tailwind v3 ergänzt du den Wert unter theme.extend.fontSize in tailwind.config.js.
Fluide Größen im Theme sind eine einzige Quelle der Wahrheit: Ändert sich das Design, passt du eine Zeile an und alle Komponenten ziehen nach.
Abstands-Utilities
Dieselbe Ausgabe funktioniert für Abstände. Schalte den Rechner in den Abstandsmodus, dann schreibt er p-[clamp(…)], das du nach Bedarf in px-, py-, m-, gap- oder space-y- umbenennst. Kombinierst du fluide Abstände mit fluider Schrift, brauchen die meisten Seiten für Größen gar keine responsiven Präfixe mehr.
Typische Stolperfallen
Bewirkt eine text-[…]-Klasse nichts, prüfe, ob der Wert normale Leerzeichen enthält und ob Tailwind den vollständigen Klassennamen in deinen Quelldateien findet – per String-Verkettung zusammengesetzte Klassennamen werden nicht erkannt. Hält Tailwind den Wert für eine Farbe, schreib ihn als text-[length:clamp(…)], um den Typ ausdrücklich anzugeben.