I am trying to make a responsive header for my website. But tailwindcss breakpoints are not working!
This is my header.tsx:
export function TopHeader() {
return (
<div className="w-full">
{/* Medium devices navbar */}
<div className="hidden md:max-lg:block">
<header className="bg-blue-500 text-white py-4 px-6">
<div className="container mx-auto">
<h1 className="text-xl font-bold">Medium Devices Navbar</h1>
</div>
</header>
</div>
{/* Large devices navbar */}
<div className="hidden lg:block">
<header className="bg-green-500 text-white py-4 px-6">
<div className="container mx-auto">
<h1 className="text-xl font-bold">Large Devices Navbar</h1>
</div>
</header>
</div>
</div>
);
}
And this is my layout.tsx:
import Head from "next/head";
import "@/styles/globals.css";
import { cn } from "@/lib/utils";
import { lato, quicksand } from "@/lib/fonts";
import { ThemeProvider } from "@/providers/theme-provider";
import { TopHeader } from "@/components/headers/top-header";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<body
className={cn(
lato.variable,
quicksand.variable,
"min-h-screen bg-background font-lato antialiased"
)}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<TopHeader />
{children}
</ThemeProvider>
</body>
</html>
);
}
None of the header is visible on my laptop screen. When I inspect using dev tools I see only hidden class and no rest of the class.