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?

[chaegumi]

This document gave me inspiration, and then I tested it and found that it worked fine

https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

I thought it might be that the configuration was not loaded, so I did the following: add @config to the global.css file

my global.css

@config "../../tailwind.config.mjs";
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";

tailwind.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
	theme: {
		extend: {},
	},
	plugins: [],
}

Doing so below can also solve the problem

@import "tailwindcss";
@source "../../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "tailwind-scrollbar";

[stafyniaksacha]

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: tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources.

This may significantly increase stylesheets size when using libraries. When added via @source '...', all utils used in the library will be included in the tailwind output, whereas using module graph, only loaded components will be scanned.

An example would be a react/vue library that ship hundred of components, and an app that use only a few of them.

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.

Can we let this issue open until then ?

[falco467]

Please work on your QS - this should never have happend in a Patch-Version update. Shortly after migrating to v4 we now have to redesign our project-structure again. We use a common HTML template which includes import of a central tailwind.css config in a central library. Now we have to redesign it, because an unnoticed patch-update broke everything and your solution seems to be "just redesign your project layout over night and inform all your devs, that they have to update and change all their projects again, because the automated security updates will break their projects"

[philipp-spiess]

Hey! I can definitely understand all of your frustrations here and I'm really sorry we had to pull the ripcord on the module-graph approach this way.

I'm not sure if you had a chance to look over the PR but that approach we used before was causing a whole lot of reliability issues for many users over a broad variety of different setups. Sometimes these issues were only surfaced in production (as some of them didn't occur in dev mode), which is also an extremely frustrating experience. We ultimately decided to bring the Vite extension closer to our PostCSS extension so that, while it might be a bit more painful to set up initially, at least it runs reliably and predictable across builds.

@stafyniaksacha @falco467 I can offer to take a look at both of your project setups if you can share a repro and we can figure out a way to set up the source discovery so that it's not significantly increasing stylesheet sizes or cause you to make changes to your project-structure.

[skoenfaelt]

Hello, @philipp-spiess could we get a link or statement how a monorepo is setup done correctly?
I used "@tailwindcss/vite": "4.0.7" in my nuxt project which relies on its nuxt layer feature. Layers may depend on each other. Some are locally (for the project) and some are installed as NPM package (they are core layers with fundamentals)

So, I configured "@tailwindcss/vite" in my core layer and it adds the tailwind.css

@import 'tailwindcss' prefix(tw) important;
@theme {
  --font-display: 'Inter', 'sans-serif';
}

with "@tailwindcss/vite": "4.0.9" no styles are generated even if I configure in the app itself where tailwind classes are written. From my perspective all above 4.0.7 is not working at the moment.

what is the correct setup for 4.0.9? Because "https://tailwindcss.com/docs/installation/framework-guides/nuxt" is not working with 4.0.9 (in my case)

[CarlosZiegler]

@skoenfaelt same to me, if use 4.0.7 all works :)

[aaronadamsCA]

I think I might have found the best solution for this.

If you add @source "." to each library CSS file, the scanner seems smart enough to resolve each @source at-rule it finds relative to the file that contains it.

packages/some-app/tailwind.css

@import "@monorepo/ui-library/tailwind.css";

packages/ui-library/tailwind.css

@source ".";

As far as I can tell, the above config successfully scans classes in both packages/some-app/**/* and packages/ui-library/**/* during both serve and build.

FWIW it also feels like a clean solution, IMHO ../ is almost always a code smell.

@philipp-spiess, could you chime in? Is this something we could document and rely on going forward, maybe even get covered by a test case or two?

[skoenfaelt]

I think I might have found the best solution for this.

If you add @source "." to each library CSS file, the scanner seems smart enough to resolve each @source at-rule it finds relative to the file that contains it.

I tried it in my nuxt project with layers. Does not work well, even if I keep care, that no stylesheets are overwritten by the layer mechanic.

For now I will stick to 4.0.7

[philipp-spiess]

@skoenfaelt regarding:

could we get a link or statement how a monorepo is setup done correctly?

I've seen many different monorepo setups so if you could briefly sketch your setup (or, even better, provide a repro) I can take a look! In general if it looks something like this:

.
├── apps
│   ├── admin
│   └── dashboard
└── packages
    └── ui

I link really like @aaronadamsCA's solution:

/* packages/ui/src/index.css */
@source ".";

/* apps/admin/src/index.css */
@import "tailwindcss";
@import "@monorepo/ui/index.css";

Another approach is that both the admin and dashboard configuration files link to the ui package manually:

/* apps/admin/src/index.css */
@import "tailwindcss";
@source "../../../packages/ui";

[skoenfaelt]

@skoenfaelt regarding:

could we get a link or statement how a monorepo is setup done correctly?

I've seen many different monorepo setups so if you could briefly sketch your setup (or, even better, provide a repro) I can take a look! In general if it looks something like this:

.
├── apps
│   ├── admin
│   └── dashboard
└── packages
    └── ui

I link really like @aaronadamsCA's solution:

/* packages/ui/src/index.css */
@source ".";

/* apps/admin/src/index.css */
@import "tailwindcss";
@import "@monorepo/ui/index.css";

Another approach is that both the admin and dashboard configuration files link to the ui package manually:

/* apps/admin/src/index.css */
@import "tailwindcss";
@source "../../../packages/ui";

Okay thanks, my repo also looks like this.
I think the issue is also with the layer system of nuxt. Thats nothing you habe to worry. I will observe what the nuxt tailwind module do with this. They will also step over this and maybe face the same issue. For now, we have an official statement and im okay with it. Sooner or later nuxt layer will also work with the new mechanics

[CarlosZiegler]

Tried 4.0.12 and this error still, here the link :
https://github.com/CarlosZiegler/zt-stack

[nktnet1]

@CarlosZiegler solution already provided above.

[CarlosZiegler]

@nktnet1 here I applied same and still not works if upgrade package > 4.0.7
https://github.com/CarlosZiegler/zt-stack/blob/main/apps/web/src/style.css

[nktnet1]

You are sourcing the tailwind package.

/* ❌ */
@source '../../../tools/tailwind';

It needs to be the UI package instead in your css file, as noted by philipp-spiess above:

/* ✅ */
@source '../../../packages/ui';

[falco467]

I could thankfully also solve our problems by using relative paths in all linked tailwind-files. For us it was @source './..' since the imported css-files reside in a subfolder. But now everything works.

@philipp-spiess I can absolutely understand why you needed to change the behaviour and I am greatful for you hard work and support. I was just sad that this was a breaking change in a last-digit update, since we apply Patch-Updates automatically without any major checks.