Not all tailwind styles are working through vite library mode

[verdverm]

What version of Tailwind CSS are you using?

For example: v4.1.7

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

For example: postcss-cli 11.0.0, Next.js 15.1.7, Vite 6.1.0

What version of Node.js are you using?

For example: v20.0.0

What browser are you using?

For example: Chrome

What operating system are you using?

For example: macOS

Describe your issue

When using vite in library mode to create a component package, some classes work while others do not

• min-w-64 does, while min-w-32 or min-w-40 do not
• bg-blue-500 works, while bg-blue-200 does not
• many custom values like min-w-[200px] do not work, though data attributes do
• another curiosity is that the bg-gray-200 is applied to the shadcn components, but not where I am using it

This is where I'm setting the values: https://github.com/blebbit/authr/blob/main/packages/authr-react-tanstack/src/views/account.tsx#L8

This is a monorepo setup with pnpm workspaces. There seem to be similar issues since (#16631)

Known workarounds

Listing out the specific classes seems to work

@source inline("min-w-{32,40}");
@source inline("bg-slate-200");

Using the base path does not change things (as offered as solutions in other issues)

@source "./"

[philipp-spiess]

Hey! I'm not sure I fully understand your repo setup but there's a Vite config in the packages/authr-react-common package that also includes your config CSS file it seems but the component you linked to is in the packages/authr-react-tanstack folder.

By default, we only look for candidates in the same package where your Vite build is started so it could be that you're running a build of the authr-react-common package which then imports the components from authr-react-tanstack but won't scan it for components. You can fix this with a custom @source rule: @source "../../" should be okay for you since both projects share a directory two level up: https://tailwindcss.com/docs/detecting-classes-in-source-files

[verdverm]

The package hierarchy is ( common -> tanstack -> frontend )

Ideally I can have styled component libraries in the shared packages that render correctly in the frontend. Both packages have their own build step and are published to NPM. I would expect the classes to be detected and included through build -> import, such that the importing application does not need to know what tailwind classes the underlying packages use, and the packages shouldn't have to specify them all individual (i.e. local detection should work and be included in bundled assets)