Issue updating Tailwind from v3 to v4 in a monorepo

[VeroPap]

Hi everyone, I'm encountering an issue while upgrading Tailwind CSS from version 3 to 4 in my monorepo project.

Project structure
Here’s an overview of my monorepo structure:

├── tailwind.config.js  <-- Global configuration in the root  
├── apps  
│   ├── console  
│   │   ├── tailwind.config.js  
├── packages  
│   ├── components  
│   │   ├── tailwind-config  
│   │   │   ├── package.json  
│   │   │   ├── styles.css  
│   │   │   ├── tailwind.config.cjs  

In the root tailwind.config.js file, I’m exporting the centralized configuration like this:

module.exports = require("./packages/tailwind-config/tailwind.config.cjs");

Additionally, the various global.css files import the centralized styles like this:

@import "@rc/tailwind-config/styles.css";

Issue encountered
When I try to upgrade Tailwind to version 4 in the apps/console directory, I get the following error:

Searching for CSS files in the current directory and its subdirectories…  
│ ↳ Path /Users/veronicapapini/Development/rc-frontend/packages/tailwind-config/styles.css is not in cwd  
│   /Users/veronicapapini/Development/rc-frontend/apps/console  

│ ↳ Cannot find any CSS files that reference Tailwind CSS.  
│   Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses `@tailwind`.  

│ Migrating stylesheets…  

│ Migrating PostCSS configuration…  

│ ↳ Installed package: `@tailwindcss/postcss`  
│ ↳ Removed package: `autoprefixer`  
│ ↳ Migrated PostCSS configuration: `./postcss.config.js`  

│ Updating dependencies…  

│ ↳ Updated package: `tailwindcss`  

│ Verify the changes and commit them to your repository.

It looks like Tailwind cannot find the CSS file because it is located in packages/tailwind-config instead of inside apps/console.

For simplicity, I only mentioned console, but I actually have multiple similar directories inside apps/.

Question
Is there a proper way to upgrade Tailwind to v4 while keeping this structure? Has anyone encountered a similar issue in a monorepo?

Thanks in advance for your help! 😊

[Inventoris]

Hi @VeroPap!

Tailwind only scans the current working directory (cwd) and its subdirectories. In this case, your cwd is apps/console/, and the CSS file itself (styles.css) is in packages/tailwind-config/, which is outside of apps/console/. That's what causes the error.

1. Try running the upgrade in the root of the monorepo, i.e. in /rc-frontend/
2. Another option: create a CSS file in apps/console/ and import styles.css there with @tailwind directives so that it is in the cwd

[VeroPap]

Hi @Inventoris :)

When I try to upgrade on the root, this is what happens:

≈ tailwindcss v4.0.5

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Could not determine configuration file for: `./engine/editor/src/app/globals.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the upgrade tool again. 

│ ↳ Could not determine configuration file for: `./engine/editor/src/styles/globals.css` 
│   Update your stylesheet to use `@config` to specify the correct configuration file explicitly and then run the upgrade tool again. 

After that, if I add config to global.css, I get another error where it basically says that it can't find the path in a temporary folder...

tailwindcss v4.0.5

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Linked `./packages/tailwind-config/tailwind.config.cjs` to `./packages/tailwind-config/styles.css` 

│ Migrating JavaScript configuration files… 

│ ↳ Migrated configuration file: `./packages/tailwind-config/tailwind.config.cjs` 

│ ↳ Could not load the configuration file: Can't resolve '/Users/veronicapapini/Development/rc-frontend/engine/editor/tailwind.config.ts" 
│   @layer bas' in '/Users/veronicapapini/.npm/_npx/234afcd4ab2f5775/node_modules/@tailwindcss/upgrade/dist

and i try to crete a style.css inside console this i what i got:

tailwindcss v4.0.5

│ Searching for CSS files in the current directory and its subdirectories… 

│ ↳ Path /Users/veronicapapini/Development/rc-frontend/packages/tailwind-config/styles.css is not in cwd 
│   /Users/veronicapapini/Development/rc-frontend/apps/console 

│ ↳ Cannot find any CSS files that reference Tailwind CSS. 
│   Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses `@tailwind`. 

│ Migrating stylesheets… 

│ ↳ Cannot read properties of undefined (reading 'theme') in `./style.css` 

│ ↳ Cannot read properties of undefined (reading 'theme') in `./node_modules/tailwindcss/base.css` 

│ ↳ Cannot read properties of undefined (reading 'theme') in `./node_modules/tailwindcss/tailwind.css` 

│ ↳ Cannot read properties of undefined (reading 'theme') in `./node_modules/@rc/tailwind-config/styles.css` 

│ Migrating PostCSS configuration… 

│ ↳ Installed package: `@tailwindcss/postcss` 

│ ↳ Removed package: `autoprefixer` 

│ ↳ Migrated PostCSS configuration: `./postcss.config.js` 

│ Updating dependencies… 

│ ↳ Updated package: `tailwindcss` 

│ Verify the changes and commit them to your repository. 

[Inventoris]

@VeroPap I could help better if you provided a link to the repository so I could deploy locally and see the errors. It's pretty hard to figure it all out from the description right now. Can you provide a link?

[VeroPap]

I'm sorry i can't is my work project :(

[Inventoris]

Okay. You wrote:

and i try to crete a style.css inside console this i what i got:

Isn't that a typo? I think tailwind is looking for styles.css according to the log:

Path /Users/veronicapapini/Development/rc-frontend/packages/tailwind-config/styles.css is not in cwd

It's also quite strange here:

│ ↳ Could not load the configuration file: Can't resolve '/Users/veronicapapini/Development/rc-frontend/engine/editor/tailwind.config.ts"
│ @layer bas' in '/Users/veronicapapini/.npm/_npx/234afcd4ab2f5775/node_modules/@tailwindcss/upgrade/dist

It should be @layer base I suppose.

[VeroPap]

I figured out why it wasn't working. Apparently, I had two style.css files in one folder. I deleted one of them, and it worked. Thanks a lot anyway! :)

[VeroPap]

removed second style.css file