TailwindCSS Duplicate CSS classes when using library in app

Question

I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:

Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:

The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)

The component looks correct on storybook:

Host app:

Looking for advice on how to correctly import the component library within the host app?

UPDATE:

I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.

Spoliation

Please show: How are you importing your component library, tailwind in your component library and tailwind in the host app (import "index.css"; or <link .../> etc.)? It looks like the component library shouldn't load tailwind on its own but require the host app to include it (if it does not already) - if then some of your classes don't show up in the app, you probably need to configure the tailwind config to not prune classes in your library. – Debonair

@Debonair - I've just installed the library normally with npm and imported the component in my host app with import { NumberInput } from "@mycomponentlib" – Spoliation

Answer 1

After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.

Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.

Spoliation