Is there some mistake in clerk authentication implementation?

Question

I have tried implementing clerk authentication to my nextjs application.

I am facing problem in loading CSS on non-protected routes,

The CSS works fine in case of protected routes, for example "/", "/sign-in" and "/sign-up", these work fine when the app is compiled for first time but later once i redirect to protected routes, and redirect back to these routes, the CSS doesn't work.

I tried changing matcher regex but nothing worked.

these are codes causing error /sign-in

import { LogoIcon } from "@/components/icons/SidebarIcons";
import Image from "next/image";
import Signin from "@/components/auth/Signin";
import "../globals.css";
export default function Page() {
  return (
    <div className="flex flex-row w-full min-h-screen relative">
      <div className="flex flex-col bg-white rounded-r-2xl z-10 w-1/2">
        <span className="flex px-12 py-8 justify-start items-start">
          <LogoIcon />
        </span>
        <div className="flex-grow flex items-center justify-center px-12">
          <div className="w-full max-w-md">
            <Signin />
          </div>
        </div>
      </div>
      <Image
        src="/auth/side.png"
        alt="Sign-in background"
        layout="fill"
        objectFit="cover"
        className="absolute inset-0 z-0"
      />
    </div>
  );
}

middleware.ts

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";
const isProtectedRoute = createRouteMatcher(["/dashboard", "/api", "/home"]);

export default clerkMiddleware((auth, req) => {
  // if (isProtectedRoute(req)) auth().protect();
  if (isProtectedRoute(req)) {
    const { userId } = auth();
    if (!userId) {
      const signInUrl = new URL("/sign-in", req.url);
      signInUrl.searchParams.set("redirect_url", encodeURIComponent(req.url));
      return NextResponse.redirect(signInUrl);
    }
  }
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import Providers from "@/lib/providers";


export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <Providers>{children}</Providers>;
}