esta es la primera vez que uso el viento de cola
Pero tengo un problema para crear un sitio web receptivo
El contenedor no funciona en Dispositivos pequeños
Funciona en dispositivos medianos como este: Dispositivo mediano
Y este está en Dispositivos pequeños: Dispositivo pequeño
Ahí está el código:
<div className="bg-blackColor min-h-screen"> <div className="container mx-auto py-10"> <div className="flex justify-between"> <div className="flex flex-[2_2_0%] items-center justify-between"> <div className="flex-1"> <img src={EnverLogo} alt="Logo" className="w-[130px] h-[40px]" /> </div> <ul className="lg:flex justify-between flex-1 hidden"> <li className="text-lg font-bold hover:text-whiteColor text-primaryColor">Home</li> <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Services</li> <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">Our Project</li> <li className="text-lg text-opacity-70 hover:text-opacity-100 text-whiteColor">About Us</li> </ul> </div> <div className="lg:flex flex-1 items-center justify-end hidden"> <div className="w-[160px] h-[35px] border-2 border-whiteColor rounded-md backdrop-blur-md" /> </div> </div> </div> </div>Supongo que se preguntará por qué no hay relleno horizontal en la pantalla pequeña. Esto se debe a que debajo de sm , el ancho es del 100%, por lo que, por supuesto, abarcaría todo el ancho de la ventana gráfica. En sm y superiores, parecería que hay relleno porque la ventana gráfica podría ser un poco más grande que 640px y es posible que la haya centrado.
Si mi suposición es correcta, deberá proporcionar relleno manualmente al contenedor usted mismo según los documentos de Tailwindcss :
// tailwind.config.js module.exports = { theme: { container: { center: true, padding: { DEFAULT: '1rem', sm: '2rem', lg: '4rem', xl: '5rem', '2xl': '6rem', }, }, }, };