next.jstailwind-csstailwind-css-4

TailwindCSS custom color not working in Next.js

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):

the color is shown as complete white

Please help, thank you!

Solution

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

    npm install tailwindcss @tailwindcss/postcss postcss

    postcss.config.mjs

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

export default config;

    Related:

    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:

    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: