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
Hello. We all know, that tailwind-like solutions wrap our css utility class with media query, when we use it with breakpoint variant:
<divclass="md:p-4"></div>
/* CSS like this will be generated */@media (min-width:768px) {
.p-4 {
padding:1rem;
}
}
So we can create a responsive markup with ease.
However, if we are creating something like embeddable widget via iframe, the markup will be forced to be mobile, since the widget is aimed to be rather small relatively to the parent page. This scenario causes the widget's css "thinks" it's a mobile device.
Suggested solution
I suggest to add an ability to "hack" the variants generation and replace media queries with something else we could control, a body class, for example. So it could look something like this:
<divclass="md:p-4"></div>
/* CSS like this will be generated */body.breakpoints-md .p-4 {
padding:1rem;
}
In this scenario we can control, which responsive variant is used.
Alternative
I've considered the following:
Make iframe widget transparent and embed it fullscreen. This approach makes it impossible to interact with page itself, while widget is active.
Use CSS vars rather than direct values. This approach doesn't cover all scenarios: it requires us to use the same utility accross all breakpoints. It's inconvenient in many cases.
Use shadow dom instead an iframe. Shadow dom might be an alternative to iframes in term of embedding things. However, it's not a drop-in replacement, and it's hard to think of it as an alternative from this point of view.
I didn't find any possibility to fake the screen width for css media queries.
Clear and concise description of the problem
Hello. We all know, that tailwind-like solutions wrap our css utility class with media query, when we use it with breakpoint variant:
So we can create a responsive markup with ease.
However, if we are creating something like embeddable widget via iframe, the markup will be forced to be mobile, since the widget is aimed to be rather small relatively to the parent page. This scenario causes the widget's css "thinks" it's a mobile device.
Suggested solution
I suggest to add an ability to "hack" the variants generation and replace media queries with something else we could control, a body class, for example. So it could look something like this:
In this scenario we can control, which responsive variant is used.
Alternative
I've considered the following:
Additional context
No response
Validations
README.md
of using the package.The text was updated successfully, but these errors were encountered: