Estoy absolutamente desesperado con este problema. Entiendo completamente el concepto de móvil primero y he podido hacer que el diseño de mi sitio web responda, sin embargo, el tamaño de fuente no cambia cuando aplico puntos de interrupción y cambia el tamaño de la pantalla.
Aquí hay un ejemplo simple de lo que no puedo hacer para trabajar. En ambos casos, el color cambia perfectamente cuando se supera el punto de interrupción, pero el tamaño del texto sigue siendo el mismo (text-sm).
<div className="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400"> Hi </div>Intenté sobrescribir fontSize en tailwind.config.js y obtengo el mismo resultado: el tamaño de fuente no cambia...
theme: { extend: { fontSize: { xs: "0.75rem", sm: "0.875rem", base: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", "6xl": "4rem", }, } },¿Alguien puede ayudarme? ¡Muchos gracias!
Está funcionando.
<div class="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400"> Hi </div> theme: { extend: { fontSize: { xs: "0.75rem", sm: "0.875rem", base: "1rem", lg: "1.125rem", xl: "1.25rem", "2xl": "1.5rem", "3xl": "1.875rem", "4xl": "2.25rem", "5xl": "3rem", "6xl": "4rem", }, } },Les comparto una obra de teatro.