Dynamically load globals.css from CDN #80657

CarlosVP120 · 2025-06-18T13:22:49Z

CarlosVP120
Jun 18, 2025

Summary

I am going to use the same codebase for multiple clients, where each client has their own color palette. I am trying to achieve this by dynamically loading the globals.css using a CDN in my layout, but it's not working and I am having a hard time finding a solution.

What is the correct way of achieving dynamic global styles?? Is it even possible?

This is my layout

import { Nunito } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/sonner";
import { ThemeProvider } from "next-themes";
import { LoadingIndicator } from "@/components/navigation/LoadingBar";
import { GlobalStyles } from "@/components/GlobalStyles";


const nunito = Nunito({ subsets: ["latin"] });

export const metadata = {
  title: "iDrall Cloud ERP",
  description: "iDrall Cloud ERP",
  manifest: "/web.manifest",
  authors: [
    {
      name: "iDrall Development Team",
      url: "https://idrall.com",
    },
  ],
};

export const viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
};

export default function RootLayout({ children }) {
  return (
    <html lang="es-MX" suppressHydrationWarning>
      <head>
        <link
          rel="stylesheet"
          href="https://cdn.idrall.com/E-COMMERCE/cdn/ASSETS/globals.css"
        />
      </head>
      <body
        className={`${nunito.className} antialiased`}
        suppressHydrationWarning
      >
        <ThemeProvider
          attribute="class"
          // defaultTheme="light"
          // forcedTheme="light"
        >
          <LoadingIndicator />
          <Toaster />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Additional information

I am using NextJS 15.3.3 with TailwindCSS V4 and Turbopack

Example

No response

icyJoseph · 2025-06-18T13:38:20Z

icyJoseph
Jun 18, 2025
Collaborator

Why do you have rel='icon' on that link?

3 replies

CarlosVP120 Jun 18, 2025
Author

Made a mistake copying the code to the discussion, already made the correction, but still not working.

icyJoseph Jun 18, 2025
Collaborator

Alright, is it not working because the link tag is loaded "too early", as in before the other styles, so your custom styles get overwritten by cascading?

icyJoseph Jun 18, 2025
Collaborator

Try adding a precedence prop: https://react.dev/reference/react-dom/components/link#controlling-stylesheet-precedence it can have any value.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dynamically load globals.css from CDN #80657

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Dynamically load globals.css from CDN #80657

Uh oh!

Uh oh!

CarlosVP120 Jun 18, 2025

Summary

Additional information

Example

Replies: 1 comment · 3 replies

Uh oh!

icyJoseph Jun 18, 2025 Collaborator

Uh oh!

CarlosVP120 Jun 18, 2025 Author

Uh oh!

icyJoseph Jun 18, 2025 Collaborator

Uh oh!

icyJoseph Jun 18, 2025 Collaborator

CarlosVP120
Jun 18, 2025

Replies: 1 comment 3 replies

icyJoseph
Jun 18, 2025
Collaborator

CarlosVP120 Jun 18, 2025
Author

icyJoseph Jun 18, 2025
Collaborator

icyJoseph Jun 18, 2025
Collaborator