Tailwind utility classes not generated in monorepo

[falkmatt91]

Tailwind CSS v4.1.5 Monorepo Issue: Missing Utility Classes in Production Build

Environment Details

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15 with Turbopack

What version of Node.js are you using?

v23

What browser are you using?

Chrome latest

What operating system are you using?

macOS

Monorepo Structure

assetos/
├── apps/
│   └── dashboard/
│       ├── src/
│       │   └── app/
│       │       ├── layout.tsx
│       │       └── globals.css
│       ├── .next/
│       ├── package.json
│       ├── next.config.ts
│       └── Dockerfile.optimized
├── packages/
│   └── ui/
│       ├── src/
│       │   └── theme.css
│       ├── tailwind.config.js
│       ├── postcss.config.mjs
│       └── package.json
├── node_modules/
├── package.json
├── pnpm-workspace.yaml
└── ...

Describe your issue

After upgrading to Tailwind CSS v4.1.5, utility classes are not being generated in the production build, despite following all recommended configurations and best practices. The issue appears to be related to how Tailwind processes files in a monorepo structure.

Current Setup

1. UI Package (packages/ui):

   • Contains shared UI components and theme
   • Has its own tailwind.config.js (tried as a workaround / fallback - also didn't fix the issue) and postcss.config.mjs
   • Uses @source directives in theme.css to scan both app and UI components

2. Dashboard App (apps/dashboard):

   • Next.js 15 application
   • Imports UI package and theme
   • Uses Turbopack for development and production builds

Attempted Solutions

1. Configuration Updates:

   • Updated to latest Tailwind v4.1.5
   • Implemented recommended @source directives
   • Configured proper content paths in tailwind.config.js
   • Added @config directive in theme CSS

2. Build Process:

   • Verified proper CSS imports in app's globals.css
   • Confirmed correct PostCSS configuration
   • Checked for proper file scanning in development

3. Monorepo Structure:

   • Ensured proper workspace configuration
   • Verified package dependencies
   • Confirmed correct file paths in configurations

Expected Behavior

Utility classes should be generated and included in the production build, as they are in development.

Actual Behavior

Production build CSS only contains theme variables and base styles, but no utility classes (like .bg-red-500, .text-white, etc.).

Additional Context

This issue appears to be related to how Tailwind v4.1.5 processes files in a monorepo structure, particularly with the @source directive and file path resolution. The problem persists despite following all official documentation and best practices for Tailwind v4 monorepo setups.

Reproduction Steps

tbd

Related Issues

• Similar issues reported in Tailwind CSS GitHub issues for monorepo setups
• Potential connection to file path resolution in monorepo structures

[wongjn]

What was the old version of Tailwind CSS before you updated to v4.1.5? Could you also provide a git repo that reproduces the unexpected behavior please?

[falkmatt91]

sure - old version was "tailwindcss": "^3.4.1" - repo to reproduce: https://github.com/falkmatt91/tailwind-v4

[wongjn]

Thank you for providing that. So generally, the Tailwind structure seems to be fairly messy, thus causing the unexpected behavior. Some stand out points to me:

• packages/ui/package.json specifies Tailwind packages with version constraint ^4.1.15 but this version does not match any versions (latest is 4.1.5).
• apps/dashboard is missing integration steps, namely the packages tailwindcss, @tailwindcss/postcss and postcss as well as a PostCSS configuration.
• apps/dashboard/src/app/globals.css tries to import @workspace/ui/theme.css but this is not an export of @workspace/ui.
• @workspace/ui does export ./src/styles/globals.css as ./globals.css, but this file has different content to packages/ui/src/theme.css.
• packages/ui/src/theme.css, packages/ui/src/styles/theme.css and apps/dashboard/src/app/globals.css have duplications of @import statements across them.
• packages/ui/src/theme.css, packages/ui/src/styles/theme.css and apps/dashboard/src/app/globals.css have varying degrees of incorrect @source paths that don't match any directory.