Responsive modifiers based on parent class

[ivansieder]

First of all: Thank you for the great work you've done for the community by bringing us tailwind!

Right now, tailwind transforms md:flex, lg:flex etc. into the respective media-queries based on defaults or settings from the config. Could it eventually be feasible to instead of converting those modifiers to media-queries to transform them to selectors like .md .flex {...}?

The idea would be to be able to also use tailwind for dynamically embedded widgets, where developers usually don't know about the parent's container size. For this reason it might be difficult to use the default media query-based approach.

With this approach the developer herself/himself could set a parent class on the wrapping element dynamically and the widget could adapt to that class instead of the parent complete current viewport. This might make sense in cases where the embedded widget doesn't use up the whole viewport.

E.g. the wrapping class changes it's class based on a ResizeObserver reacting to actual element changes and sets lg, md, sm,... itself.