You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm creating a component library using styled-components with twin.macro, and I'm wondering if it's possible to roll the relevant tailwind base styles with each component I export from my component library?
Currently I need to export the tailwind base styles (and some other global CSS I have) to be used by the application, so I have something like this:
Which, when my library is consumed in another application, they'd have to import GlobalStyles from my library, and add it to their application.
I'd like to avoid having to make the consumer of my component library add these global styles to their app for 2 reasons:
It'd be an easier experience to use the library I'm creating.
I believe this will prevent the base styles from interfering with the application consuming my component library, as I'm guessing the styles would be minified CSS classes, rather than apply globally to all buttons, inputs etc...
I think it would be possible to copy the base styles and add them manually to each component I export, however I'm wondering if there's a neater way of achieving this, so it'll be easier to keep up-to-date with the latest from tailwind.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hey!
Firstly, thanks for twin.macro, it's awesome.
I am in need of some help though;
I'm creating a component library using styled-components with twin.macro, and I'm wondering if it's possible to roll the relevant tailwind base styles with each component I export from my component library?
Currently I need to export the tailwind base styles (and some other global CSS I have) to be used by the application, so I have something like this:
Which, when my library is consumed in another application, they'd have to import
GlobalStyles
from my library, and add it to their application.I'd like to avoid having to make the consumer of my component library add these global styles to their app for 2 reasons:
I think it would be possible to copy the base styles and add them manually to each component I export, however I'm wondering if there's a neater way of achieving this, so it'll be easier to keep up-to-date with the latest from tailwind.
Beta Was this translation helpful? Give feedback.
All reactions