Issue with Tailwind CSS v4 Not Applying Styles in Built Component Library React TS + Vite

[MrFatra]

Hello There,

I'm currently facing some issues while building an npm component library using React, Vite, and TailwindCSS v4.

Problem:

1. It seems that Tailwind CSS classes are not being included in the final build output of the UI library. For example, I've defined several Tailwind utility classes in the components, but when the library is consumed by another project, none of the styles are applied.
2. Tailwindcss classes have no effect on the components in the library itself.

Here’s my UI library repo https://github.com/Alope-Community/alope-ui (on unstable branch)

Any insights would be greatly appreciated. Thanks in advance!

[wongjn]

Consider:

• Removing the @import "tailwindcss"; from src/index.css. Consumer apps should contain this @import statement, not the library, otherwise you may get a double-up of Tailwind CSS rules.
• Add @source directive(s) that point to its own library files that contain Tailwind class names. By default, Tailwind in a consumer will ignore node_modules when scanning for class names. This is where this library would sit in the file system in the consumer, hence both your problems occur.
• Ensure src/index.css is shipped as a production file. This is so that consumers can @import this file. You can relocate the production version of this file if you so wish but it should contain the uncompiled CSS code as-is. Also be aware that @source paths are relative to this CSS file.
• Remove import './index.css' in src/main.tsx. Instead, have the consumer @import the src/index.css file. This is so that its @theme tokens, @source directives and other CSS gets registered in the consumer when the consumer runs its Tailwind compilation.

[MrFatra]

OK I tried... and it works perfectly... thanks a lot!