4.0.8 is a break update, many styles don't work after upgrading in the Astro project

[chaegumi]

What version of Tailwind CSS are you using?

v4.0.8

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

pnpm10.4.1 astro5.3.0 tailwindcss4.0.8 @tailwindcss/vite4.0.8

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

Describe your issue

many styles don't work after upgrading in the Astro project

Especially our private component package cannot parse correctly

Return to 4.0.7 and work normally

[nktnet1]

Experiencing the same issue - can also confirm that downgrading @tailwindcss/vite to version 4.0.7 works.

For example, in my turborepo template (React JS) repository:

• https://github.com/nktnet1/rt-stack

This form (from the web app, which imports from private packages @repo/tailwind-config and @repo/ui):

renders the buttons and inputs of the @repo/ui package with no styles:

[blueskoo]

Same issue when update to 4.0.8, class like col-span-* not compiled in other pacakge of pnpm workspace, seems auto-detection didn't take effect.

@tailwindcss/vite downgrage to 4.0.7, works fine.

[zkMake]

I believe it is related to this change: #16631

Moving away from module-graph for discovering class names breaks monorepo setups that rely on it. I wish it was configurable.

[disayres]

Create the tailwind.config.js file in the root of your project.

npx tailwindcss init

But if you mean that some classes are broken, I should say that you should take a look at the Tailwind documentation because some classes have been shortened and changed.

[smaccoun]

I believe it is related to this change: #16631

Moving away from module-graph for discovering class names breaks monorepo setups that rely on it. I wish it was configurable.

Just started seeing this. I have a monorepo where my app directory imports from a shared pacakge that has a lot of tailwind classes. None of those classes are generated anymore. I wonder if #16631 needs to parse package.json or something to figure out which files to scan. Seems a little risky though. Also think it might be smart to make configurable for monorepo setups

[philipp-spiess]

Hey folks! Yeah unfortunately with the latest updates we have had to make the Vite plugin function exactly like the PostCSS plugin now (in terms of how it finds source locations).

That means that if you want to scan a folder outside of your Vite root or inside any of your git-ignored directories, you need to use @source "..." now: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources.

We tried to get away with doing something smarter on Vite but we've been running into many much more subtle issues (where production builds would sometimes end up with a different set of styles than dev builds etc.) so we had to make these bigger changes for now unfortunately.

I'll do more investigation next week to see if there are any more things we can do here but for now add @source "..." like you would if you'd use the PostCSS plugin.

[nktnet1]

Hey @philipp-spiess,

Thank you for your answer - in my turborepo, I tried using @source for the internal package:

apps/web/src/style.css:

@import 'tailwindcss';
@import '@repo/tailwind-config/style.css';
@source '../../../tools/tailwind';

However, this still breaks in v4.0.8.

---

Edit: even when changing it to:

@import '../../../tools/tailwind/style.css';
@source '../../../tools/tailwind';

/* Or */
@import '../node_modules/@repo/tailwind-config/style.css';
@source "../node_modules/@repo/tailwind-config";

the styling still does not work.

[jikyu]

Hey @philipp-spiess,

Thank you for your answer - in my turborepo, I am already using @source for the internal package:

apps/web/src/style.css:

@import 'tailwindcss';
@import '@repo/tailwind-config/style.css';
However, this still breaks in v4.0.8. Does it need to be a relative path now?

Edit: changing it to:

@import '../../../tools/tailwind/style.css';
still does not work.

@nktnet1 I had to move style.css into our app packages (basically creating style.css for each app), then relatives imports worked.

[nktnet1]

I have a shared tailwind style.css that's meant to be re-used as a base across many different apps in the turborepo, so unfortunately this won't be a viable solution. Thanks for sharing though.

Will need to lock version to 4.0.7 for now :/.

[jikyu]

@nktnet1 actually, if you do both

@import '../../../tools/tailwind/style.css';
@source '../../../tools';

It should work without creating separate styles all over again.

[nktnet1]

Still doesn't seem to work - I've tried using all of these:

@import 'tailwindcss';

@import '@repo/tailwind-config/style.css';
@source '../../../tools/tailwind';

@import '../../../tools/tailwind/style.css';
@source '../../../tools';

@import '../node_modules/@repo/tailwind-config/style.css';
@source '../node_modules/@repo/tailwind-config';

Repo is here if you want to have a look:

• https://github.com/nktnet1/rt-stack

Change pnpm-workspace.yaml at the project root to from 4.0.7 to:

  '@tailwindcss/vite': 4.0.8

and try looking at the login page.

[jam-fran]

Similar to @nktnet1 I've tried several @source and @import combinations in my monorepo. Curious why the Tailwind team would version a breaking change as a patch.

In my (turborepo) monorepo, my tailwind.css file lives in packages/tailwind. All of the apps that use classes are in ./apps or ./packages/ui.

Adding @import "tailwindcss" source("../../"); fixed the issue for me in dev mode, but failed to fix anything in production (seems like all of the variables in my @theme were ignored).

I've also suddenly been unable to load in fonts, which are installed in my packages/tailwind.package.json via fontsource and imported in my tailwind.css.

[philipp-spiess]

@nktnet1 Was looking into your example and added the ui package to be scanned by Tailwind via @source '../../../packages/ui'; to make the login page work:

@jam-fran Is it possible for you to share a reproduction so I can look into it?