Tailwind Nested Styles Is not Work in Production in Nextjs(Tailwind V4.1.6 - Nextjs v15 app router)

[alirezagh73]

We're using Tailwind CSS v4 with Next.js v15 (App Router) in our project.
We style our components using the @apply directive in combination with nested CSS selectors, like so:

💡 Code Example

.btn {
  @apply inline-flex items-center cursor-pointer justify-center gap-x-1.5 rounded-lg font-medium transition-all duration-200 focus:outline-none;

  &-lg {
    @apply h-12 px-4 min-w-[108px] text-d-subtitle1;
  }

  &-contained {
    @apply text-white;

    &-primary {
      @apply bg-primary hover:bg-primary-dark hover:shadow-primary;
    }

    &:disabled {
      @apply cursor-not-allowed bg-disabled/20 text-disabled/80;
    }
  }
}

✅ Expected Behavior
All nested styles (like .btn-lg, .btn-contained-primary, .btn-contained:disabled, etc.) should be included in the production CSS build.

❌ Actual Behavior
In development mode (next dev), everything works perfectly.

In production mode (next build && next start), all nested styles (e.g., &-lg, &-contained, etc.) are missing from the final CSS output.

📦 Project Environment

Next.js: 15.x (App Router)
Tailwind CSS: 4.x
PostCSS config: using tailwind nesting

Tailwind-related config:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
    "postcss-nested": {},
  },
};
export default config;

📌 Notes

It seems like Tailwind’s nesting support works correctly in dev mode but is not preserved in the production build process when using the native &-modifier nesting syntax.

Is this a known limitation or a misconfiguration on our side?
Any help would be appreciated 🙏

[wongjn]

Diagnosis

The discrepency is due to the fact that Tailwind uses native CSS nesting that is transpiled in production.

Given the source:

.btn {
  &-lg {
    …
  }
}

Dev

After @tailwindcss/postcss

.btn {
  &-lg {
    …
  }
}

After postcss-nested

.btn-lg {
  …
}

Prod

After @tailwindcss/postcss

-lg.btn{…}

After postcss-nested

-lg.btn{…}

This is because Tailwind expects native CSS nesting syntax, which it then transpiles for production using Lightning CSS.

Solution

The grand solution would be to use your templating system instead of custom CSS and @apply.

Otherwise, workarounds include:

• Use CSS native syntax:

  .btn {
    …
  }
  
  .btn-lg {
    …
  }
  
  .btn-contained {
    …
  
    &:disabled {
      …
    }
  }
  
  .btn-contained-primary {
    …
  }

• Disable Tailwind's transpilation:

   const config = {
     plugins: {
  -    "@tailwindcss/postcss": {},
  +    "@tailwindcss/postcss": {
  +       optimize: false,
  +    },
       "postcss-nested": {},
     },
   };
   export default config;

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701