Distributing a components library built with Tailwind

[tomerzcod7]

Hey guys, I'm a tailwind newbie here, I guess this topic has probably been discussed before but I couldn't seem to find relevant information.

I'm building a react component library (design system) for the company I work for with Tailwind. Some of the client apps that will consume this library are legacy apps and are using different method for styling (sass, styled components, etc).

How should I distribute my library and the Tailwind generated css? If the consuming applications were all using Tailwind I guess they could've extended my config/preset and generate the correct css file on their own, but for my use case what is the recommended approach? Should I just generate my own css file with postcss-cli or something and distribute it as well from the package? other alternatives?

Thanks in advance

[adamwathan]

Hey! What you've suggested sounds right to me for your situation — compile the CSS your library needs and include that compiled CSS file in the package you distribute so your consumers can import it 👍

[tomerzcod7]

Great! Thanks Adam. Loving Tailwind so far :)

[jezikk]

And what about preflight css in this scenario? Should be the preflight style included in the library? Will components look the same without preflight style?

[tomerzcod7]

I think if you build the CSS file and distribute it with the library, it will include everything needed for the components to look like planned (all the CSS, preflight or custom). So there shouldn't be a problem

[jezikk]

But what if I would like to distribute the component library or one shared component inside the existing web page written in different stack? Will preflights break the page?

[robbyrice]

In that case you might want to look at disabling fPreflight

[moishinetzer]

Not to revive a completed post, but what about if the consuming client already has tailwind? cc: @adamwathan have you seen anything like this?