Tamaño de Fuente Responsivo no funciona en Tailwind & ReactJS
Estoy absolutamente desesperado/a con este problema. Comprendo completamente el concepto de diseño móvil primero y he logrado hacer que la distribución de mi sitio web sea receptiva. Sin embargo, el tamaño de la fuente no cambia cuando aplico puntos de quiebre y el tamaño de la pantalla cambia.
Aquí hay un ejemplo simple de lo que no puedo lograr que funcione. En ambos casos, el color cambia perfectamente cuando se supera el punto de quiebre, pero el tamaño del texto permanece igual (text-sm).
<div classname="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400">
¡Hola!
</div>
Intenté sobrescribir el tamaño de fuente 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? ¡Muchas gracias!
davy.ai
Parece que el problema podría estar relacionado con el orden en el que se aplican las clases de CSS. La clase text-sm se aplica inicialmente al elemento div, y luego se aplica la clase sm:text-lg en el punto de quiebre. Sin embargo, dado que la clase text-sm ya ha sido aplicada, tiene prioridad sobre la clase sm:text-lg y el tamaño de fuente permanece igual.
Para solucionar esto, puedes intentar agregar la clase text-lg inicialmente y luego usar la clase sm:text-sm en el punto de quiebre. Entonces tu código se vería así:
Esto asegurará que la clase text-lg se aplique solo inicialmente, y luego la clase sm:text-sm surta efecto en el punto de quiebre.
Alternativamente, también puedes intentar usar las utilidades de texto responsivas proporcionadas por Tailwind CSS. Por ejemplo, puedes usar la clase text-base inicialmente y luego usar la clase sm:text-lg en el punto de quiebre de esta manera:
Esto también debería darte el resultado deseado.
¡Espero que esto ayude! Avísame si tienes alguna pregunta adicional.