TailwindCSS custom color not working in Next.js

Question

I've copied directly from the document, but the color is still not showing up. I'm using Tailwind v4 with Next.js.

In my global.css:

@import "tailwindcss";
@theme {
  --color-bermuda: #78dcca;
}

In my layout.jsx:

import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en"> 
      <body className="bg-bermuda">    // <--------- here
        <Navbar />
        <div className="px-12">{children}</div>
      </body>
    </html>
  );
}

My postcss.config.mjs:

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

Additionally, it doesn't look like the color is being picked up by tailwind inside the css file (usually it's represented by a non-white color):

Please help, thank you!

What does your postcss.config.mjs file look like? Did you install the @tailwindcss/postcss plugin as the docs suggest? tailwindcss.com/docs/installation/framework-guides/nextjs — rozsazoltan
– rozsazoltan, Commented Aug 20 at 6:23
As for your other question, the answer is that VSCode doesn't recognize TailwindCSS's special syntax, but there is an official extension available which also needs a bit of configuration, like this: Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference in global.css — rozsazoltan
– rozsazoltan, Commented Aug 20 at 6:24
"but the color is still not showing up" - Or do you mean the color indicator square before the #121063 color code? That’s also handled by the previous VSCode extension. — rozsazoltan
– rozsazoltan, Commented Aug 20 at 6:26
If everything is fine, then in DevTools (which should be the first step when dealing with a CSS issue) you should check whether bg-bermuda is being generated, and if it something you forgot to mention - what is overriding it. See: From v4 the reset style cannot be overridden by TailwindCSS classes — rozsazoltan
– rozsazoltan, Commented Aug 20 at 8:24

rozsazoltan · Accepted Answer · 2025-08-20 08:26:23Z

1

For Next.js, starting from TailwindCSS v4, you need to install it with the @tailwindcss/postcss plugin as the documentation suggests:

Install Tailwind CSS v4 with Next.js

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

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

export default config;

If the installation is perfect, then the next step - which for you should always be the first when detecting a CSS issue after a correct installation - is to check in DevTools whether the class was actually "generated", and if so, why its styling isn't being applied (it's usually dimmed or crossed out if something overrides it). Always should use @layers. A common mistake is that reset CSS files are too strong without a layer:

From v4 the reset style cannot be overridden by TailwindCSS classes

Additionally, in both TailwindCSS v3 and v4, VSCode does not recognize TailwindCSS's special syntax. This is handled by an official extension, but this is a duplicate question:

Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference in global.css

edited Aug 20 at 8:26

answered Aug 20 at 6:55

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rozsazoltan Aug 20 at 8:29

Related: apply background not working (github.com - discussion #18763)

Chris Nalusaku Aug 20 at 14:25

Thank you! It worked after I've installed the extension

Collectives™ on Stack Overflow

TailwindCSS custom color not working in Next.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related