Using Vite to create a React library - Tailwind styles do not get bundled

[mderazon]

I am having issues with my React component library. I am trying to bundle it to an npm package, it seems to be working, but I haven't been able to bundle Tailwind with the library package.

1. The library uses React and Tailwind and some other packages. I've marked everything as dev-dependencies but also added react and react-dom as peer dependencies
2. Library code is available at https://github.com/scheduleonce/once-ui-react
3. Storybook that uses the library code directly (not via node_modules) is working okay and can be seen at https://scheduleonce.github.io/once-ui-react
4. Here's a Stackblitz that demonstrate the issue: https://stackblitz.com/edit/react-tebiky . You can see that the button / checkbox is not styled correctly

Any idea what is the problem ?

Thank you

[sadn1ck]

The final CSS bundle that tailwind generates classes in is imported in your storybook.

You need to also copy that file specifically into your dist, export it in package.json, and then import it inside your consumer app.

Edited the package.json inside node_modules on stackblitz to add it so that the consumer app (a vite app here) can resolve the CSS import (see image)

This is assuming your consumers may not run tailwind, so the entire CSS is necessary. You may also provide your tailwind config as a preset if you want tailwind consumers to use it (that way they can get the specific styles of the components they use instead of every bundled style)

[mderazon]

Thank you very much for your help.
I consider the fact my library is using Tailwind an implementation detail, I might change it in the future and wouldn't want my users to have to import it. Is there another way than asking users to import it ?

Also, could you please share your Stackblitz with the edit ?
Thanks again

[sadn1ck]

Stackblitz doesn't save updates in node_modules, here's the relevant piece that I added

// package.json
"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "import": "./dist/ui-react.es.js",
    "require": "./dist/ui-react.umd.js",
    "styles": "./dist/style.css"
  },
  "./css": "./dist/style.css" // ← This
},

/* index.css */
@import '@oncehub/ui-react/css';

The (sort of) drawback with using tailwind for component libs is that tailwind just generates one single CSS file, so even if consumer uses 1 component, you have to import that entire CSS file in the consuming app (style.css in your dist)

I am not sure if there's a way to auto inject styles if a component is used, but you can check this issue #1579 and this blog post to see how it can be done without tailwind (which uses this injection lib)

In my opinion, asking consumers to import that single CSS file might be the easiest way to do this with tailwind. In case you move to split CSS per component later, you can follow the blogpost which uses the inject plugin to achieve that.

[mderazon]

Got it.
So, my options are:

1. Have the consumer library import the styles separately.
2. Have Tailwind as a peer dependency and assume the consumer application uses Tailwind - I am not sure this will work.
3. Use vite-plugin-lib-inject-css plugin, which assumes the consumer application uses a bundler as well

I've tried # 3 and I see that the output js file in the dist folder is now including a stylesheet import in the first line

import "./index.css";

So I think this should work. It doesn't acheive the "import only what you need" feature that the blog post is mentioning, for that I will need to use something like css modules

Thanks again for the help

[ManishMadan2882]

Is there any way to inject TailwindCSS, instead of import package-name/dist/style.css.