El vocabulario básico

Abra la maqueta de una interfaz existente y mida los márgenes interiores de sus recuadros: 12, 16, 15, 20, 14, 24 píxeles. Nadie decidió ese 15, ni ese 14. Aparecieron porque un día un texto se desbordaba dos píxeles y un padding: 15px resolvió el problema más rápido que una reflexión sobre la cuadrícula. Multiplicadas por dos años de parches, esas diferencias de uno o dos píxeles producen una interfaz que todo el mundo percibe como vagamente desajustada sin saber decir por qué.

Tailwind dificulta esta deriva, porque no le ofrece un continuo de valores sino una escala. p-3 equivale a 12 píxeles, p-4 a 16, y no hay nada entre ambos. Ante una necesidad de 15 píxeles, el primer reflejo es buscar cómo forzar el valor. El buen reflejo es elegir 16: en el 95 % de los casos ningún usuario notará la diferencia, y acaba de ganar una interfaz coherente. Esta lección presenta el vocabulario básico, pero su verdadero tema es este: saber cuándo quedarse dentro de la escala y cuándo salir de ella.

Los espaciados

Una sola unidad gobierna toda la cuadrícula: 1 equivale a 0.25rem, es decir, 4 píxeles en una configuración por defecto. Multiplique por el número escrito en la clase.