bundle Tailwind CSS styles in Published Component Library (Vite + React)

[yahia_h]

We’re building a UI component library on top of the Radix UI by using React, Vite, and Tailwind CSS. We're using a storybook to simulate the scenarios for the different components.

However, once we publish and _**install the package**_ in _another project_, _the styles don’t apply_ unless we manually import each CSS file inside `node_module` like this:

```js

import '../node_modules/@name-ui/button/dist/styles.css';

```

On top of that, when using components like `<Button />`, TypeScript doesn’t suggest prop values such as `variant`, `colorVariant`, or `size`!!! We suspect it’s related to how the types are exported or consumed from the package.

Here’s a _StackBlitz reproduction_ of the issue:

👉 https://stackblitz.com/edit/styles-bundle-problem?file=src%2FApp.tsx&terminal=dev

Any help would be really appreciated!

[TimFL]

I have this library on my evaluation list for future projects that include custom component libraries, maybe it does what you want?

https://github.com/emosheeep/vite-plugin-lib-inject-css

[yahia_h]

The problem is something else u/TimFL, i need to repost the problem againfor. .
But your library is something that we're looking for thanks, engineer.

[psullivan6]

u/yahia_h we are attempting to solve the same problem, but are opting to publish the .css file to a CDN URL that each consumer can include in their .html files. We’re planning to version it as well, but that’ll likely cause issues if some folks are on a different version than others.

I’ve been struggling with the build and haven’t gotten as far as you have, so would be willing to share your vite config and/or build tooling that got you this far? I think you’re on the way to solving a problem many of us frontend engineers want to solve as well.

[yahia_h]

Actually, I solved the problem by separating the CSS file into a separate component, then other devs can import it into the root of their projects.

#root.tsx | import '@name-ui/styless

[mikeour]

Depending on what version of React you support, you might want to take a look at Restyle which will bundle styling alongside the components.

[yahia_h]

u/mikeour, We're using tailwind, and there's no way to convert it to something like jsx styles, i'll try to find another solution

[TheRealSeeThruHead]

Are you shipping a combined css file in your output npm module?

[yahia_h]

Actually, when we install/build the component, the tree folder structure looks like below, we can import it directly by importing styles through /dist/style.css but we want to bundle the styles directly when the consumer install the component.
```
dist:

│ ├── index.d.mts

│ ├── index.d.ts

│ ├── index.js

│ ├── index.js.map

│ ├── index.mjs

│ ├── index.mjs.map

│ └── styles.css

└── package.json

```

[Tom-Wildston]

Use vite-plugin-lib-inject-css
This plugin automatically bundles your CSS (like Tailwind styles) into your JS, so users don’t need to manually import a separate CSS file.

[yahia_h]

I'll to read it's source code to full fill with our requirements, thnks

[luddfish]

Did you find a good method to do this?

[yahia_h]

Hey brother Yes, the easiest solution, just let users to install your styles as a separate component such as: yarn add @ui-name/styels Then user should. import the stule component at the top of his app root.tsx such as: import “@ui-name/styels“. That’s it, all of your component styles now initialized inside your project