Cómo salir de la escala de Tailwind sin romper nada.
Las webs que más se ven hechas con IA usan los tamaños y espacios de Tailwind sin cambiar uno. Una escala propia de seis tamaños y siete espacios, decidida una vez, cambia más que cualquier color.
Cuando calibré el Slop Score, la señal que más separó las webs genéricas de las cuidadas no fue un color ni una tipografía. Fue algo que no se ve a simple vista: que todos los espacios y todos los tamaños de letra salgan de la escala de Tailwind. En 31 de las 33 webs genéricas de la muestra, todos los márgenes y separaciones caían en esa escala. En las cuidadas, la mediana fue 80 % para los espacios y 50 % para los tamaños de letra.
Tailwind no tiene la culpa: su escala es buena. El problema es que es de todos. Si cada distancia de tu página es un valor que eligió el modelo de la misma lista que usa siempre, el ritmo de tu web es el de cualquier otra hecha igual.
Seis tamaños de letra, no veinte
Elige seis tamaños y no uses otros: uno para etiquetas, uno para el texto y cuatro para títulos. Que el salto entre ellos se note. Un título de 86 px sobre texto de 17 px dice qué importa; uno de 30 px sobre texto de 16 px, no tanto.
Un punto de partida: elige el tamaño del texto y multiplica por 1,5 para cada nivel de título. Con texto de 17 px quedan 25, 38, 57 y 86 px, más 14 px para las etiquetas. No es una fórmula sagrada: pruébala con tus textos y ajusta el título más grande hasta que tu frase más importante entre en dos renglones.
Espacios que salen de tu texto
Con los espacios pasa lo mismo, y siete valores alcanzan. En lugar de elegirlos de una lista, sácalos del renglón de tu texto: con 17 px e interlineado 1,5, un renglón mide unos 26 px. Sus partes y múltiplos te dan la escala: 6, 13, 26, 39, 52, 104 y 156 px.
Lo importante es que la distancia diga algo. Poco espacio entre cosas que van juntas (un título y su bajada) y mucho entre cosas que no (una sección y la siguiente). Si todo está a 24 o 32 px, todo parece igual de relacionado, y la página no tiene ritmo.
Ponlo en variables, no en clases sueltas
Escribe la escala una vez, en un solo lugar, y usa solo eso:
:root {
/* tamaños: texto de 17 px, cada nivel x1,5 */
--t-etiqueta: 14px;
--t-texto: 17px;
--t-3: 25px;
--t-2: 38px;
--t-1: 57px;
--t-0: 86px;
/* espacios: el renglón (17 x 1,5 = 26 px), sus partes y múltiplos */
--e-1: 6px;
--e-2: 13px;
--e-3: 26px;
--e-4: 39px;
--e-5: 52px;
--e-6: 104px;
--e-7: 156px;
}Si usas Tailwind, lleva estos valores a su tema y anula los de fábrica, para que el modelo no tenga de dónde sacar otros.
El prompt
Para que la IA respete la escala, díselo con los números y con la regla de cuándo usar cada uno:
Usa solo estos tamaños de letra: 14, 17, 25, 38, 57 y 86 px (variables --t-*). Usa solo estos espacios: 6, 13, 26, 39, 52, 104 y 156 px (variables --e-*). No uses tamaños ni espacios con otros valores, tampoco clases de Tailwind por defecto. Lo que va junto va cerca: título y bajada a 13 px. Lo que no va junto va lejos: entre secciones, 156 px. Si un diseño necesita un valor que no está en la lista, pregúntame antes de inventarlo.Después, mide tu web en el Slop Score: entre otras cosas, avisa si casi todos tus espacios valen lo mismo. Y si quieres más prompts como este, uno por cada cambio, están en la guía de prompts.
Preguntas frecuentes
¿Cuántos tamaños de letra debería tener una web?
Con seis alcanza para casi cualquier sitio: uno para etiquetas, uno para el texto y cuatro para títulos. Más que eso suele ser el resultado de no haber elegido, no de necesitarlos.
¿Está mal usar la escala de Tailwind?
No. Es una buena escala, pero es la de todos. El problema es usarla entera y sin cambiar nada, porque la página termina con el mismo ritmo que cualquier otra generada igual.