DEV Community

Discussion on: Using tailwind at run-time with web components

Collapse
 
westbrook profile image
Westbrook Johnson

James, does the runtime version create a fully unique stylesheet for each element you use?

I'd be very interested in hearing if you thought there was a middle ground solution that was able to build the used Tailwinds style as "parts" or "sets" that could then be consumed by LitElement or any system that leverages adopted stylesheets, a la:

static styles = [tailwinds.colors, tailwinds.headlines, ...etc.];
Enter fullscreen mode Exit fullscreen mode

Whereby the parts that could be leveraged across multiple components would be deduplicated and shared across the consuming components at constructed stylesheets.

Not sure where the line would be drawn and whether this sort of approach could actually overcome the full build or runtime approaches you've outlined here, but the if a suite of components all leverage similar parts of the Tailwinds system then it would seem like you could take some work out of the browser this way. Right?

Collapse
 
43081j profile image
James Garbutt

The run-time solution (twind) in this case would populate a single shared stylesheet, unless you choose to create one per module, then each component would have duplicate rules potentially but their own sheets.

The build-time solution (my other post) would populate a sheet per module, stripping styles based on what was used in that individual module.

i agree it'd be nice to have a middle ground whether you do it at run-time or build-time: a few shared stylesheets multiple components can depend on. but tailwind itself doesn't organise rules as well as your example afaik, so it'd be difficult i think