Force twind shim to render sheet with all classes even if not present in the dom

Hi, I’m building a utility that will allow you to use twind to render multiple different versions of the style sheet (I’m doing so in an iframe as I have found that twind is pretty “global” in nature - yes, I’ve read all of the examples about .reset()). What I’m doing right now with rendering twind in an iframe to force isolation works fine. I render the domSheet() in an iframe and report back the generated stylesheet to the main document. This allows me to non-destructively/statelessly try out different configs (almost like hot reloading). The problem is that the generated stylesheet will only render classes that are actually used in the document. Is there a way to tell the setup() to render all classes even if they’re not used yet?

I have also tried using the “non shim” version of the module to no avail. Here’s my example:

            import *  as twindShim from 'https://cdn.skypack.dev/twind/shim';
            twindShim.setup({
              preflight: true, // do not include base style reset (default: use tailwind preflight)
              mode: 'warn', // throw errors for invalid rules (default: warn)
              hash: false, // hash all generated class names (default: false)
              theme: {
                colors: MY_COLORS
              }, // define custom theme values (default: tailwind theme)
              darkMode: 'class', // use a different dark mode strategy (default: 'media')
              sheet: domSheet()
            });
            window.parent.postMessage(
              {
                messageType: "styleData",
                styleInnerHTML: document.querySelectorAll('style')[0].innerHTML
              },
              "*"
            );

[jordwalke]

I’ll give it a try! Thanks for the help!

[sastan]

@danielweck Please do not forget about @twind/cli. Our tool to generate a CSS file - works just like the new tailwindcss jit, but without postcss