La barra lateral, el feed y los widgets del encabezado desaparecieron repentinamente del host local cuando agregué el contenedor y el contenido, ¿a dónde fueron?
Aquí está mi código:
import { constants } from 'buffer' import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' const style = { wrapper: 'flex justify-center h-screen w-screen select-none bg [#1520b] text-white', content: 'max-w-[1400px] w-2/3 flex justify between', } export default function Home(){ return ( <div className = {style.wrapper}> <div className = {style.content}> <h2>Sidebar</h2> <h2>Feed</h2> <h2>Widgets</h2> </div> </div> ) }Esto es lo que sucede: agrega el text-white al wrapper para que todo el texto sea blanco y el color de fondo predeterminado también sea blanco para que la página se vea como si estuviera vacía.
también el bg [#1520b] el valor aquí no es válido, debe tener 3 o 6 letras y debe conectarlo con bg usando - como este bg-[#1520b9] , pero tampoco funcionará porque no puede use valores arbitrarios en viento de cola con reacciones como esta. así que te recomendaría que lo muevas a un estilo en línea como este:
style={{backgroundColor:'#1520bf'}}
y lo mismo ocurre con max-w-[1400px] :
style={{maxWidth:'1400px'}}
Así que tu código debería verse así:
import { constants } from 'buffer' import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' const style = { wrapper: 'flex justify-center h-screen w-screen select-none text-white', content: ' w-2/3 flex justify-between', } export default function Home(){ return ( <div className = {style.wrapper} style={{backgroundColor:'#1520bf'}}> <div className = {style.content} style={{maxWidth:'1400px'}}> <h2>Sidebar</h2> <h2>Feed</h2> <h2>Widgets</h2> </div> </div> ) }