CSS Typografie zu Tailwind
font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. Farbe nutzt text-*.
Typografie gehört zu den berechenbaren Teilen einer Migration: font-size: 1.5rem entspricht text-2xl, font-weight: 700 wird zu font-bold. Unangenehm bleibt das Präfix text-, das sowohl Schriftgröße als auch Textfarbe abdeckt. In langen Klassenlisten führt das regelmäßig zu Verwechslungen, die nur ein aufmerksamer Blick auffängt.
Größe und line-height zusammen
font-size + line-height mappen oft auf text-* / leading-*. Seltenes Marken-leading → leading-[…].
Gewicht und Tracking
font-weight 600 → font-semibold. Feines negatives letter-spacing braucht oft arbiträres Tracking.
Rampe nicht erzwingen
13px Typo auf den „nächsten“ Token zu runden kann die visuelle Hierarchie brechen.
Ausprobieren
.example { display: flex; gap: 1rem; padding: 1rem; }Vertrauenshinweis: Ausgabe visuell prüfen. Der Konverter ist ein Entwurfshilfe.