0

I have a several React projects where I import some UI-components from a private NPM-package. This UI-components package is also built using React and styled with Tailwind 3. The projects where I import the UI-components is using Tailwind 2 and Rollup. I have the abillity to change most of this if it would help.

The CSS of this UI-components package is imported in my projects index.ts file. (I have access to this NPM package and can change to code there as well)

One of these components is a wrapper-component. That takes in a prop called classes.

import { Wrapper } from 'our-ui-package/components/wrapper';

<Wrapper classes="pt-[30px]">
  <Some-children-here />
</Wrapper>

Here I want to be able to send inn Tailwind-classes like pt-3 or even better: send in arbitrary values like pt-[30px].

Now this does not work, as the CSS for the UI-component is created when the NPM-package is build.

Is there any way I can combine the CSS from the UI-components package, as well as add any extra CSS I want to generate by sending these props to the wrapper (or any other component I make that accepts classes as props)?

Appreciate any help. Thank you so much.

Summary: Importing components that are styled with Tailwind from a NPM-package, and send inn extra Tailwind-classes as props to said compontents, hoping the styling would update. This does not happen, as the CSS is generated in the NPM-package is already generated when the package is built.

sleipsenhogg
  • 1
  • The project I used to work with didn't allow to pass arbitrary classes to components styled with tailwind. Instead we would just pass `variant `prop which the component had defined some styles for – Konrad Nov 14 '22 at 07:23

0 Answers0