Tailwind classes from library components not applied in consuming app

[Mhd-Hisham-Jabri]

I have a shared component library built with Shadcn UI + Tailwind v4+ TypeScript + tsup. Components like are exported and used in a separate consuming application. However, the Tailwind classes do not apply when using the library components. For example:
<Button variant="outline" size="icon" />
renders a button with no styling.
If I run npx shadcn@latest add button in the consuming app, the same component gets styled correctly.
Library setup
{ "name": "shadcn-library", "type": "module", "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", "files": ["dist", "src"], "dependencies": { /* ... */ } }
tsupconfig
`import { defineConfig } from "tsup";

export default defineConfig({
entry: ["src/index.ts"],
outDir: "dist",
format: ["esm"],
sourcemap: true,
clean: true,
dts: true,
splitting: false,
treeshake: true,
external: ["react", "react-dom"],
esbuildOptions(options) {
options.alias = {
"@": "./src",
};
options.jsx = "automatic";
},
});
**Consuming app setup**import type { Config } from "tailwindcss";

export default {
content: [
"./src//*.{ts,tsx}",
"./node_modules/shadcn-library/src//*.{ts,tsx}"
],
theme: { extend: {} },
} satisfies Config;
`
Vite is used to build the consuming app.

Questions :
Is there a recommended way to publish Shadcn/Tailwind component libraries so Tailwind picks up classes automatically?
Does cva / clsx require special handling when used in a separate package?
Do I need to modify Vite or Tailwind config in the consuming app to handle this properly?

[wongjn]

Is there a recommended way to publish Shadcn/Tailwind component libraries so Tailwind picks up classes automatically?

Yes, have a CSS file in the library that has any neccessary @utility, @custom-variant, @theme and @source statements. Especially the @source statements should be required so that Tailwind CSS in the consumer knows to scan the library's component files.

The consumer would then @import the library's CSS file to get all the aforementioned rules into its own CSS compilation.

So bare minimum:

/* library/dist/index.css */
@source "./";

/* consumer/src/index.css */
@import "tailwindcss";
@import "library/dist/index.css";

Notice how the libary's CSS is uncompiled. We leave the compilation to the consumer.

Does cva / clsx require special handling when used in a separate package?

No.

Do I need to modify Vite or Tailwind config in the consuming app to handle this properly?

No.

[wongjn]

Have a CSS file in the library that has any neccessary @utility, @custom-variant, @theme and @source statements. Especially the @source statements should be required so that Tailwind CSS in the consumer knows to scan the library's component files.

The consumer would then @import the library's CSS file to get all the aforementioned rules into its own CSS compilation.

So bare minimum:

/* shadcn-library/dist/index.css */
@source "./";

/* ./styles/global.css */
@import "tailwindcss";
@import "shadcn-library/dist/index.css";

Notice how the libary's CSS is uncompiled. We leave the compilation to the consumer.

[Mhd-Hisham-Jabri]

yes I apply this solution but it didn't work
in the library src/styles/global.css :
@source "./";
in consumer app :
@import "tailwindcss";
@import "shadcn-library/styles";

but still not apply the classes for the components

[wongjn]

Consider providing git repo(s) that reproduce the issue and we can take a look for you.

[Mhd-Hisham-Jabri]

library repo
https://github.com/Mhd-Hisham-Jabri/tailwind-library
you can install the library also in any react app
npm i shadcn-library

[wongjn]

Since the CSS is in its own folder, you'd want to change the @source to cover your components. You'd also want to remove @import "tailwindcss"; from it:

-@source "./";
+@source "../components";

-@import "tailwindcss";
 @import 'tw-animate-css';

 @custom-variant dark (&:is(.dark *));

[rozsazoltan]

If the component library is also based on TailwindCSS v4, then consider not shipping production-ready CSS in the library. Instead, import the source CSS, and TailwindCSS will map the library’s components using @source, allowing the final project to generate the production CSS.

This can be taken even further: for example, if you have 1000 components but you only use 10 of them, it's beneficial if the unused 990 components' CSS does not end up in the production build. With @source, you don't have to point to the entire components folder - only the files that are actually used, with some automation. Here is a small example to illustrate the idea:

• All components from the UI package are included in the project's generated CSS, but I don't use every component
• Shipping a UI package alongside projects in a monorepo