Global.css not working
Unanswered
Siberian posted this in #help-forum
SiberianOP
Hi, I am using NextJS 14 with the app router. I have a global.css file inside my app folder which is imported in my rootlayout as so:
And inside my global.css file I have styling for the body as so:
But my body is not affected by the styling and I really don't know why.
...
import "./globals.css";
...
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
<Header />
{children}
<Footer />
</Providers>
</body>
</html>
);
}And inside my global.css file I have styling for the body as so:
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
color: rgb(var(--foreground-rgb));
background-color: black;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}But my body is not affected by the styling and I really don't know why.
4 Replies
@Siberian Hi, I am using NextJS 14 with the app router. I have a global.css file inside my app folder which is imported in my rootlayout as so: typescript
...
import "./globals.css";
...
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
<Header />
{children}
<Footer />
</Providers>
</body>
</html>
);
}
And inside my global.css file I have styling for the body as so: css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
color: rgb(var(--foreground-rgb));
background-color: black;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
But my body is not affected by the styling and I really don't know why.
in your page you are importing a 'globals.css' file but you are also saying that your actual css file is called 'global.css'.
that might be the issue
that might be the issue
SiberianOP
Oh no that cant be true… Thank you i’ll watch it coming back home
alright, no worries
@Pearls alright, no worries
SiberianOP
I've checked and the file is named "globals.css" so it was imported "right"