How to Fix: not working tailwind (turbopack + pnpm )

6 min read Aldawsari
6 min read

Tailwind CSS Not Working in Next.js with Turbopack and pnpm: Fixing the Monorepo/PostCSS Resolution Bug

If Tailwind CSS suddenly stops applying styles in a Next.js app when you run it with Turbopack and pnpm, the problem is usually not your utility classes. The real issue is that Turbopack can fail to resolve the Tailwind/PostCSS toolchain correctly in certain pnpm-linked dependency layouts, which leaves your CSS compiling without Tailwind transforms.

This issue is commonly reproduced in setups where dependencies are installed with pnpm, then the app is started with Turbopack using next dev --turbo or an equivalent development script. The repository linked in the issue demonstrates that Tailwind works in one mode but not in the Turbopack flow.

Understanding the Root Cause

The bug comes from the interaction between Turbopack, PostCSS, Tailwind CSS, and the way pnpm stores packages using symlinks and a non-flat node_modules structure.

Here is what is happening under the hood:

  • Tailwind CSS is usually applied through PostCSS.
  • Next.js expects your global stylesheet, commonly globals.css, to be processed by the PostCSS pipeline.
  • In some Turbopack + pnpm combinations, module resolution for the Tailwind/PostCSS chain does not behave the same way as the classic webpack-based dev server.
  • As a result, directives like @tailwind base;, @tailwind components;, and @tailwind utilities; are not expanded correctly, so utility classes such as bg-red-500 appear to do nothing.

This is why the issue feels confusing: your files, config, and class names may all be correct, but the build pipeline is not actually executing Tailwind in the expected way.

In practice, the most reliable fix is to make dependency resolution explicit and ensure your Tailwind/PostCSS setup is aligned with the exact Next.js version and package manager behavior.

Step-by-Step Solution

Use the following checklist to fix the issue consistently.

1. Install Tailwind, PostCSS, and Autoprefixer directly in the app

Make sure the required CSS tooling is installed as direct dependencies of the Next.js app, not only hoisted or shared indirectly.

pnpm add -D tailwindcss postcss autoprefixer

If you are testing from scratch, also ensure Next.js itself is installed normally in the same app.

pnpm add next react react-dom

2. Generate clean Tailwind and PostCSS config files

pnpm exec tailwindcss init -p

This should create:

  • tailwind.config.js
  • postcss.config.js

Use a content configuration that matches your app structure exactly.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

And make sure your PostCSS config is minimal and standard:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. Verify your global CSS includes Tailwind directives

In your global stylesheet, include the Tailwind layers:

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

For example, in app/globals.css or src/app/globals.css.

4. Import the global stylesheet from the correct entry file

In the App Router, import the stylesheet from app/layout.tsx:

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

In the Pages Router, import it from pages/_app.tsx:

import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

5. Disable Turbopack temporarily to confirm the diagnosis

Before changing anything else, compare behavior between standard dev mode and Turbopack.

pnpm next dev
pnpm next dev --turbo

If Tailwind works in the first command but not in the second, you have confirmed this is a Turbopack-specific resolution/build issue, not a Tailwind syntax problem.

6. Remove lockfile and reinstall dependencies cleanly

Because pnpm relies on symlinked package storage, stale dependency state can preserve broken resolution behavior.

rm -rf node_modules
rm -f pnpm-lock.yaml
pnpm install

Then restart the app:

pnpm next dev --turbo

7. Pin compatible package versions

If the bug appears after upgrading, align your versions of next, tailwindcss, postcss, and autoprefixer. In reproducible environments, mismatched minor versions can trigger different build behavior.

{
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.4.1"
  },
  "dependencies": {
    "next": "14.x",
    "react": "18.x",
    "react-dom": "18.x"
  }
}

Use versions that match the known-good matrix for your project rather than mixing old Tailwind with newer experimental dev tooling.

8. If needed, use the stable dev server until the Turbopack bug is resolved

If your project is blocked and the issue only occurs in Turbopack, the most practical short-term fix is to avoid Turbopack during development.

{
  "scripts": {
    "dev": "next dev"
  }
}

This keeps Tailwind working while you wait for an upstream fix in Next.js/Turbopack. You can track framework-level changes in the Next.js issue tracker.

9. Optional: prefer a simpler package layout while debugging

If you are testing inside a workspace or a more complex pnpm setup, reduce variables:

  • Keep the app in a standalone folder first.
  • Install Tailwind-related packages directly in that app.
  • Avoid relying on shared config packages until the baseline works.

This makes it easier to prove whether the failure is caused by Turbopack itself or by workspace resolution.

Common Edge Cases

Tailwind classes exist, but only some styles apply

This often means your content paths are incomplete. If your components live under src or a custom folder and that path is missing from tailwind.config.js, Tailwind will purge those classes from the generated CSS.

Global CSS is never loaded

If globals.css is not imported from the correct root entry file, Tailwind can be configured properly and still appear broken. Double-check app/layout.tsx or pages/_app.tsx.

Using Tailwind v4 assumptions in a Tailwind v3 project

Some guides mix configuration patterns from different Tailwind versions. If your project uses Tailwind v3, keep the standard tailwind.config.js and @tailwind directives. Do not combine them with a setup intended for a different major version.

Workspace or shared package config is not detected

When using pnpm workspaces, Turbopack may behave differently from webpack when resolving shared config files or CSS-related packages. Put the config files directly in the app first, then reintroduce shared abstractions after confirming it works.

PostCSS config format is incompatible with module type

If your project uses ESM and your config files use CommonJS, or the reverse, the config may be silently skipped depending on tooling and version. Keep file format and export syntax consistent with your package setup.

FAQ

Why does Tailwind work with next dev but fail with next dev --turbo?

Because the issue is usually inside the Turbopack processing pipeline or its dependency resolution behavior with pnpm. Standard dev mode and Turbopack do not always resolve CSS tooling identically.

Is this a Tailwind bug or a Next.js/Turbopack bug?

In this scenario, it is typically a Next.js/Turbopack integration issue, not a problem with Tailwind syntax itself. Tailwind is often configured correctly, but the transform step is not executed as expected.

What is the fastest production-safe workaround?

Use the stable development server by running next dev without Turbopack, keep Tailwind/PostCSS installed directly in the app, and avoid extra workspace complexity until the upstream issue is fixed.

The key takeaway is simple: when Tailwind is not working only with Turbopack and pnpm, treat it as a toolchain resolution problem. Verify direct dependencies, simplify config, test without Turbopack, and fall back to the stable dev server if needed.

Leave a Reply

Your email address will not be published. Required fields are marked *