Tailwind CSS custom colors and standard colors not working in Next.js 15 project

Tailwind CSS custom colors and standard colors not working in Next.js 15 project. I'm working on a Next.js 15 project with Tailwind CSS v4, and I'm having issues getting any Tailwind background colors to work - both custom colors and standard ones like bg-red-500.

What I've tried

I've defined a custom color in my globals.css:

@theme {
  --colors-suki-light: #f6fdff;
}

And I'm trying to use it in my component:

export default function Home() {
  return <div className="bg-suki-light">aaaaaaaaaaaaaa</div>;
}

But the background color isn't being applied. Standard Tailwind colors like bg-red-500 aren't working either.

My setup

tailwind.config.ts:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./app/**/*.{ts,tsx}",
    "./app/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
  ],
  plugins: [],
};
export default config;

globals.css:

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@theme {
  --colors-suki-light: #f6fdff;
}

package.json dependencies:

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "next": "15.3.1"
},
"devDependencies": {
  "typescript": "^5",
  "@types/node": "^20",
  "@types/react": "^19",
  "@types/react-dom": "^19",
  "@tailwindcss/postcss": "^4",
  "tailwindcss": "^4",
  "eslint": "^9",
  "eslint-config-next": "15.3.1",
  "@eslint/eslintrc": "^3"
}

Any help would be greatly appreciated as I've been stuck on this for hours.

Solution

Starting from TailwindCSS v4, there is no need for a tailwind.config.js file anymore; it has become obsolete. Instead, a CSS-first configuration approach was introduced. I can see that you're already applying this in your globals.css file using the @theme directive.

What's breaking changes from TailwindCSS v4? - StackOverflow
New CSS-first configuration option in v4 - StackOverflow
Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command - StackOverflow

But the bg-suki-light background color isn't being applied. Standard Tailwind colors like bg-red-500 aren't working either.

The reason for this is that you incorrectly declared the color namespace in the @theme. You can find the available namespaces here:

Theme variable namespaces - TailwindCSS v4 Docs
How to use custom color themes in TailwindCSS v4 - StackOverflow

The correct way to declare the color is using color instead of colors:

@import "tailwindcss";

@theme {
  --color-suki-light: #f6fdff; /* --color-... instead of --colors-... */
}

Extra: It's recommended to place default styles under @layer base, because your current unlayered body styling is stronger than TailwindCSS's (since starting from v4, layers are used). This way, later on, you won’t have issues trying to override the body or other class styles if you continue to declare them without a layer.

TailwindCSS v4 responsive and custom CSS not applied - StackOverflow
From v4 the reset style cannot be overridden by TailwindCSS classes - StackOverflow

:root {
  --background: #ffffff;
  --foreground: #171717;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-family: Arial, Helvetica, sans-serif;
  }
}