Типографика CSS в Tailwind
font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. Цвет — text-*.
Типографика переносится довольно предсказуемо: font-size: 1.5rem даёт text-2xl, а font-weight: 700 — font-bold. Сложность возникает с цветом, потому что утилиты с префиксом text- обозначают и размер, и оттенок. В длинной строке классов такие пары легко перепутать, поэтому их лучше перечитывать внимательно.
Размер и line-height вместе
font-size + line-height часто → text-* / leading-*. Редкий брендовый leading → leading-[…].
Насыщенность и tracking
font-weight 600 → font-semibold. Тонкий отрицательный letter-spacing часто просит arbitrary tracking.
Не ломайте рампу
Округление 13px типографики до «ближайшего» токена может сломать иерархию.
Попробовать
.example { display: flex; gap: 1rem; padding: 1rem; }Заметка о доверии: проверяйте результат визуально. Конвертер — черновик для разработчиков.