Plugin CSS revolucionario para Tailwind CSS 4. Tipografía responsive fluida con variables CSS que se adapta mágicamente a cualquier viewport. ¡Sin tocar una sola línea de código!
$ npm install tailwind-fluid-size
Ve la diferencia entre usar tamaños fijos tradicionales vs tamaños fluidos
Los tamaños fijos se ven mal en móviles y ocupan demasiado espacio o son ilegibles
Los tamaños fluidos se adaptan perfectamente a cualquier pantalla manteniendo legibilidad
👆 Arrastra el divisor para comparar los estilos 👆
Todo lo que necesitas para crear tipografía responsive perfecta
Cambia TODO con CSS variables. Viewport, escalas, line-heights. Sin editar el plugin.
para transiciones suaves. clamp() Sin saltos bruscos.
Automáticos por tamaño: tight para heros, relaxed para lectura.
100% CSS puro. Usa @utility Cero dependencias.
hasta text-size-4 hasta text-size-144 . Incrementos de 4px. Máxima flexibilidad.
Tamaño mínimo configurable. Perfecto en móviles sin comprometer diseño.
3 pasos simples y estarás listo
npm install tailwind-fluid-size @import "tailwindcss"; @import "tailwind-fluid-size"; <h1 class="text-size-72 font-bold"> ¡Hola Mundo! </h1>
Ahora puedes usar todas las utilidades text-size-* en tu proyecto.
Personaliza las variables CSS en @layer base para ajustar el comportamiento.
Ajusta los controles en tiempo real y redimensiona tu ventana para ver la magia del escalado fluido
text-size-12 fijo text-size-20 fluido ✨ text-size-32 fluido text-size-48 fluido + snug text-size-80 fluido + tight ⚡