Content to source upgrade issue

[codenomnom]

What version of Tailwind CSS are you using?

4.1.11

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

Next.js 15.4.3, npm 10.8.1

What version of Node.js are you using?

v22.4.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Since this is a upgrade issue I don't have a reproduction URL.

Describe your issue

I upgraded my project from v3 to v4 using the official upgrade documentation. Everything went fairly okay, no need to dive too deep into it.

The actual issue I have (which caused things to not work properly) is that the content field from tailwind.config.ts was not properly migrated to my globals.css file. I'm having a monorepo, but the example would give you more clarity:

// root/apps/web/tailwind.config.ts
const config: Config = {
  darkMode: ['class'],
  content: [
    // more here, it's a big and complex monorepo, but the example will make it clear
    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],

Since I'm using Next.js, tailwind.config.ts is inside root/apps/web/ (my web app), which has a tailwind dependency. And it makes sense, since heroui is installed inside root/apps/web/node_modules.

Then, after the upgrade, I get this:

/* root/apps/web/src/ui/styles/globals.css */
@source '../../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

It took me some time to figure out why this wasn't working 😊

All of this makes sense, as the dir seems relative to root. That's where I executed the upgrade script from, because I am having multiple tailwind related apps/packages. But the result does not take in consideration where the actual tailwind config was, so that it can figure out the appropriate location.

I'm sorry if this is confusing or there's something else off, but it's pretty hard for me to reproduce the same issue again 😊

Thanks!

[thecrypticace]

Content paths were, by default, relative to the CWD in v3. This means that it was relative from where you ran your build script. You could change this however to be relative to the config file by using relative: true in the config.

I assume this means that you were running your app from the ./root/apps/web directory instead of the root yeah?

I don't know that the upgrade script could really "know" that's where you were running your app from but using the config file location will work in a lot cases (though not all). Will think on this one some

[codenomnom]

Hm, I haven't thought about that. Our production pipeline uses Docker and prunes the apps, so your assumption might be correct.

I'm unsure how the upgrade code works, but it seems it assumes you always run commands from the same place, and since the initial config said ./node_modules and the new location is 5 levels deep, it made it 5 levels up? That would be tricky to solve indeed.

It's even more troublesome now that I think about it, because of the monorepo setup (and npm). If a single app relies on the package, it will put it inside root/apps/web/node_modules; otherwise - extract and reuse at root/node_modules.

I understand this is something based on my setup, but I'm guessing others would have issues during migration as well, and there might be some clever way to deal with it, or at least prompt the user somehow.