Cannot apply unknown utility class "from-background" with Next.js 15 + Turbopack

[Neptune2k21]

Environment

• Next.js 15.5.4
• Tailwind CSS 4.x
• Node 22.19.0
• Turbopack
• Linux (Ubuntu 22.04 / WSL / Docker)

Steps to Reproduce

1. Create a Next.js project with Tailwind:

npx create-next-app@latest client --typescript --tailwind
cd client

2. Add a globals.css file with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gradient-to-br from-background via-light to-accent;
    @apply min-h-screen;
  }
}

3. Create tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        background: "#f5f5f5",
        light: "#e0e0e0",
        accent: "#ff5722",
      },
    },
  },
  plugins: [],
};

4. Restart the development server:

npm run dev

Expected Behavior

• The gradient from-background via-light to-accent should compile correctly.
• Tailwind should recognize the colors defined in theme.extend.colors.

Actual Behavior

CssSyntaxError: tailwindcss: /app/src/app/globals.css:1:1: Cannot apply unknown utility class `from-background`.

Additional Context

• tailwind.config.js is located at the root of the project.
• Next.js server has been restarted and npm install already run.
• @tailwind and @apply directives work in other contexts; only custom classes fail.
• Likely interaction issue with Turbopack + Next.js 15.

[wongjn]

You seem to have mixed v3 and v4 installation instructions.

For step 2:

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

For step 3, delete the tailwind.config.js file. Tailwind is configured in CSS:

 @import "tailwindcss";

+@theme {
+  --color-background: #f5f5f5;
+  --color-light: #e0e0e0;
+  --color-accent: #ff5722;
+}
+
 @layer base {
   body {
     @apply bg-gradient-to-br from-background via-light to-accent;
     @apply min-h-screen;
   }
 }

[Neptune2k21]

Hi bro,

Thank you so much for your help! Everything is working perfectly now.

Honestly, it’s a good reminder — this is exactly what happens when you try to learn and solve issues with AI: you think it’s complicated, but in the end the problem was pretty simple . You just have to stay up-to-date with the tech.

Really appreciate your guidance!

Best regards,