Is there any reasonable way to simulate a narrower window, or dynamically change breakpoints?

[dvdsgl]

We would like to display tailwind components inside of a div that simulates a browser window. Our users can resize this div to see how the tailwind components resize responsively. Basically, it should work just like the tailwindui gallery:

tailwindui uses iframes to do this, but we tested that approach and it breaks JavaScript libraries that access window.

If we could dynamically adjust breakpoints, I think we could achieve the same interaction—simulating a narrower, dynamic window width. Is there any reasonable way to do this with this library?

Thank you!

[dvdsgl]

We accomplished this by adding responsive-{sm,md,lg,xl,2xl} variants to twin, and manually setting these classes on the pseudo browser, to simulate dynamic responsiveness within a container:

diff --git a/node_modules/twin.macro/macro.js b/node_modules/twin.macro/macro.js
index 8b28d1d..8d1e40b 100644
--- a/node_modules/twin.macro/macro.js
+++ b/node_modules/twin.macro/macro.js
@@ -2690,6 +2690,14 @@ var variantConfig = function (ref) {
    'group-hocus': function (variantData) { return prefixDarkLightModeClass('.group:hover &, .group:focus &', variantData); },
    'group-active': function (variantData) { return prefixDarkLightModeClass('.group:active &', variantData); },
    'group-visited': function (variantData) { return prefixDarkLightModeClass('.group:visited &', variantData); },
    +  
    +  'responsive-sm': function (variantData) { return prefixDarkLightModeClass('.responsive-sm &', variantData); },
    +  'responsive-md': function (variantData) { return prefixDarkLightModeClass('.responsive-md &', variantData); },
    +  'responsive-lg': function (variantData) { return prefixDarkLightModeClass('.responsive-lg &', variantData); },
    +  'responsive-xl': function (variantData) { return prefixDarkLightModeClass('.responsive-xl &', variantData); },
    +  'responsive-2xl': function (variantData) { return prefixDarkLightModeClass('.responsive-2xl &', variantData); },
    +  
    // Media types
    print: '@media print',
    screen: '@media screen',

[ben-rogerson]

This looks like a good solution.
I was also thinking container queries would be great for this but the browser support isn't quite here yet.
In the future, I'm planning to add a variant API to twin for these types of customisations. Until then you should be able to use patch-package to patch-in these extra variants.

[rdgr]

Hi, @ben-rogerson . Seems like support for container queries has improved in the past couple of years. Is it on the roadmap to add it?

https://tailwindcss.com/blog/tailwindcss-v3-2#container-queries
https://caniuse.com/css-container-queries

[ben-rogerson]

@rdgr Hi there! You can actually work with container queries right now in twin - but just like vanilla tailwindcss, you'll first need the @tailwindcss/container-queries plugin.

Container queries example →

[rdgr]

That's great, thanks!