Handling base styles in a component library

[james-bowers]

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:

import { GlobalStyles as TailwindBaseStyles } from 'twin.macro';

const Globals = createGlobalStyle`
...
`;

export const GlobalStyles = () => {
  return (
    <>
      <TailwindBaseStyles />
      <Globals />
    </>
  );
};

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:

1. It'd be an easier experience to use the library I'm creating.
2. 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.