Por qué hacer fluido el espaciado
Un espacio en blanco generoso aporta calma a un diseño de escritorio, pero el mismo padding de sección de 96px desperdicia un tercio de la pantalla de un móvil. Los breakpoints fijos lo arreglan a saltos y a menudo dejan las tabletas con un espaciado demasiado justo o demasiado holgado. Un valor fluido crece de forma continua, así que cada pantalla recibe un espacio proporcional a su ancho, y escribes una declaración en lugar de tres.
Las mismas matemáticas que la tipografía fluida
El espaciado usa exactamente la misma fórmula lineal que el tamaño de fuente: un mínimo, un máximo y una recta entre dos anchos de viewport. La diferencia está en los números que eliges. El espaciado suele crecer en un factor mayor que el texto, y pasar de 24px a 64px de padding de sección es habitual, porque el espacio en blanco no tiene que seguir siendo legible. El aviso de zoom de 2,5× de las WCAG no se aplica al espaciado, pero aparece como recordatorio por si reutilizas el valor en texto.
Crear una escala de espaciado
Para un sistema coherente, define unos pocos tokens de espacio fluidos como --space-s, --space-m y --space-l, cada uno con su mínimo y su máximo. Usa los pequeños para los huecos dentro de los componentes, los medianos para el padding de las tarjetas y los grandes entre secciones de la página. Combínalos con una escala tipográfica fluida con el mismo rango de viewport para que texto y espacio crezcan al mismo ritmo.
En Tailwind, aplica el resultado como valor arbitrario, por ejemplo p-[clamp(…)], gap-[clamp(…)] o my-[clamp(…)]. La calculadora genera una clase lista con guiones bajos en lugar de espacios, que es como Tailwind espera los espacios dentro de los valores arbitrarios.
Consejos
Mantén también el espaciado en rem para que respete la configuración de fuente del usuario junto con el texto. Evita valores fluidos en bordes y líneas finas, donde los píxeles fraccionarios pueden verse borrosos. Revisa la vista previa a 320px para asegurarte de que el padding aún deja sitio al contenido.