Tailwind v4 bg-* classes not working in nextjs with shadcn

[AlimKhan76]

The below is my global.css
`@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-inter);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}

@layer base {

• {
  @apply border-border outline-ring/50;
  }
  body {
  @apply bg-background text-foreground font-sans;
  }

:root {
--radius: 0.625rem;
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}

.dark {
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.439 0 0);
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
}

html,
body {
-ms-overflow-style: none; /* IE and Edge *
scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
`

Component.json
{ "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "src/app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" }

postcss.config.mjs
`const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};

export default config;
`

<div className="flex justify-end pt-4 border-t bg-green-300">

Both justify-end and bg-green-300 is not working

Whats strange is that this exact setup is working in another one of my repos

Kindly help

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[rozsazoltan]

https://play.tailwindcss.com/j8fT0QVHFi?file=css

If I had to guess, you have some extra CSS that you haven't shared with us. It's important to note that TailwindCSS uses CSS layers, which will always be weaker than any unlayered styles. Therefore, it's a good idea to force all your CSS into layers and establish a consistent order.

• From v4 the reset style cannot be overridden by TailwindCSS classes
• In which order do CSS stylesheets override?
• What is the order of precedence for CSS?
• TailwindCSS v4 utilities are too weak to override the styling of Ant Design v5 components

Wrong example with too strong unlayered CSS:

• https://play.tailwindcss.com/IaTYsTwRem?file=css

[AlimKhan76]

Okay, I debugged it further and figured out the Root cause but dont have a fix yet
`
import "./globals.css";
import { Inter } from "next/font/google";
import { QueryProvider } from "@/lib/provider/QueryClientProvider";
import { Toaster } from "@/components/ui/sonner";
import { COMPANY } from "@/constant/company/company.constant";
import LogRocketProvider from "@/lib/provider/LogRocketProvider";

const inter = Inter({
subsets: ["latin"],
weight: ["400", "600", "700"],
variable: "--font-inter",
});

export const metadata = {
title: ${COMPANY.NAME},
};

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

<body className={${inter.variable} antialiased}>

{children}




);
}`

The above is my main 'layout.tsx` and I am using a custom inter font, when I remove the variable or the weight then the bg classes starts working

[AlimKhan76]

https://github.com/AlimKhan76/tailiwindv4-error
I have setup this repo as a minimal reproduction

The below is what I see with the custom font present

Without the weight/variable fields

[rozsazoltan]

Can't reproduce with your repo: https://stackblitz.com/github/AlimKhan76/tailiwindv4-error?file=src%2Fapp%2Flayout.tsx

[AlimKhan76]

I figured out the issue. For dev I was using the default run dev command which in turned called next dev --turbopack remove turbopack from the command resolved the issue

[AlimKhan76]

Thanks for your time and help @wongjn @rozsazoltan . If any of you have a idea as to why this happened do let me know. So I can understand the issue