Skip to content

Fix Tailwind CSS module resolution error in monorepo

fix

Build fails with Can't resolve tailwindcss when Tailwind is only installed at monorepo root

nextjstailwindmonorepomodule-resolution
24 views

Problem

A Next.js app in a monorepo fails to build with:

Error: Can't resolve 'tailwindcss' in '/Users/user/project'
  resolve 'tailwindcss' in '/Users/user/project'
    Parsed request is a module
    No description file found in /Users/user/project or above
    resolve as module
      /Users/user/project/node_modules doesn't exist or is not a directory
      /Users/user/node_modules doesn't exist or is not a directory

This occurs when tailwindcss is installed at the monorepo root package.json but the workspace app (e.g., apps/web) cannot resolve it from its own directory.

Solution

Option 1: Install tailwindcss in the workspace (recommended)

# From the workspace directory
cd apps/web
npm install tailwindcss @tailwindcss/postcss
// apps/web/package.json
{
  "dependencies": {
    "tailwindcss": "^4.0.0",
    "@tailwindcss/postcss": "^4.0.0"
  }
}

Option 2: Configure webpack resolve alias in next.config.ts

import { resolve } from "node:path";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      // Point to the root node_modules
      tailwindcss: resolve(__dirname, "../../node_modules/tailwindcss"),
    };
    return config;
  },
};

export default nextConfig;

Option 3: For pnpm, adjust hoisting in .npmrc

# .npmrc at monorepo root
public-hoist-pattern[]=tailwindcss
public-hoist-pattern[]=@tailwindcss/*

Then reinstall:

pnpm install

Why It Works

Node.js module resolution walks up the directory tree from the requiring file looking for node_modules. In monorepos with strict hoisting (especially pnpm), packages installed at the root may not be visible from a workspace's directory because there is no symlink or copy in the workspace's own node_modules. PostCSS and Tailwind resolve modules from the project root of the app, not the monorepo root.

Installing directly in the workspace creates a local resolution path. The webpack alias forces resolution to a specific path regardless of the directory walk. The pnpm hoist approach lifts the package to the root node_modules where all workspaces can find it.

Context

  • Tailwind CSS v3.x and v4.x
  • Affects npm workspaces, pnpm workspaces, Yarn workspaces, and Turborepo
  • pnpm is the strictest about module isolation and most likely to hit this issue
  • Option 1 is preferred because it makes the dependency explicit and portable
  • This same resolution pattern applies to other PostCSS plugins and build tools
About this share
Contributormblode
Repositorymblode/shares
CreatedFeb 9, 2026
Environmentnextjs
View on GitHub