De la tipografía CSS a Tailwind

font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. El color usa text-*.

La tipografía se traduce con bastante fidelidad: font-size: 1.5rem corresponde a text-2xl y font-weight: 700 a font-bold. La parte incómoda llega con el color, porque las utilidades text- comparten prefijo con las de tamaño y es fácil confundirlas al leer una clase larga. Merece la pena revisar esas líneas con calma.

Tamaño y line-height juntos

font-size + line-height suelen mapear a text-* / leading-*. Si el leading es de marca y raro, usa leading-[…].

Peso y tracking

font-weight 600 → font-semibold. letter-spacing negativo fino a menudo pide tracking arbitrario.

No fuerces la rampa

Redondear 13px tipográficos al token “más cercano” puede romper jerarquía visual.

Probar

Abrir conversor

.example { display: flex; gap: 1rem; padding: 1rem; }

Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.

Extensión de Chrome