[SOLVED] Issue with Tailwind CSS style Not Loading on Certain Pages after logout in Next.js App made with App Router

Issue with Tailwind CSS style Not Loading on Certain Pages after logout in Next.js App made with App Router

I'm building a project using Next.js (App Router without the src directory) and Tailwind CSS for styling. For authentication, I'm using Auth.js.

When I start my app, everything works perfectly fine. After logging in, I'm redirected to the dashboard, and all the routes within the (dashboard) route group load with the correct styles. However, when I navigate back to my homepage or login page, the styles fail to load, and I'm just seeing unstyled text.

Project Structure:

The homepage is inside the app directory.
The dashboard is inside the app/(dashboard) route group.

I tried to figure out the solution in search but no particular solution found.

Here is my root layout that I modified:

import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Auth Data",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

And this is my (dashboard) route layout:

import { Inter } from "next/font/google";
import "../globals.css";
import Header from "@/components/common/Header";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Lead Data",
  description: "An enrich data website",
};

export default function ProtectedLayout({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}

Here is my middleware,

import { authConfig } from "./auth.config";
import NextAuth from "next-auth";

export const { auth: middleware } = NextAuth(authConfig);

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|images|favicon.ico|ws).*)"],
};

Solution

try importing "globals.css" only in the RootLayout.