Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

aurelianspodarec's avatar

Injecting CSS and JavaScript to an iFrame - How to?

Hi there!

I'm creating a sandbox inside an iFrame. I'm using React and REdux for the dashboard.

The user can import the HTML. The user can enter tailwindcss classes - if the user types tex it should show all text-* styles in the menu, like a recommendation/IDE. The user can modify the tailwind with the tailwind.config.js, however, via the browser. So I will show the JSON data inside the browser, and let the user modify any part they like.

How do I compile tailwindcss so I can have the recommendation like the IDE, so if someone types pt-300 its going to know it doesn't exist, but if the user extends the config, and adds in pt-300 it will.

How do I do that? I'm also thinking o performance here as I don't want to blow up the computer, though I can always pre-load some of the stuff on the boot of the app, but then if the user wants to change it directly, that will need to be compiled anyway. I've seem some do this, and there is no lag when changing the config.

I'm using this for the iFrame as well if it makes any difference https://github.com/ryanseddon/react-frame-component

So far I've been doing this basically:

  function containerTailwind() {
        // <script src="https://cdn.tailwindcss.com"></script>
        // Inject CSS 
        
        
        const initialContent = `
            <!DOCTYPE html>
            <html>
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    
                </head>
                <body class="bg-white">
                    <div></div>
                </body>
            </html>
        `;

<Frame
                        initialContent={frameState.initialContent}
                        onLoad={event => event.stopPropagation()}
                        ref={iframeRef}
                        className="bg-white h-full w-full relative"    
                        style={{ "pointerEvents": "auto"}}
                        loading="lazy"
                    >
                        <div dangerouslySetInnerHTML={{__html: buildJSONfromHTML(pages.pages.data.pages[pages.activePageID - 1].html) }} />     
                        <FrameContent />
                    </Frame>

Now I'm thinking about

const injectCSS = () => {
        if(!document) return

        const head = document?.querySelector('head');
        const style = document?.createElement('style');

        head?.appendChild(style);
    }

But then, where will the styles even be stored, how do I compile them, how do I tell it to use X config?

My biggest question is how do I let the user inject their own config file (from the input I provide) and let it compile without blowing the browser or taking 10seconds to do so.

I've also discovered this so I might prob need to use that I Guess https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

I just have no idea how to go about injecting tailwindcss based on what the user puts in their own config.

0 likes
11 replies
jlrdw's avatar

It is there already, or should be, just display the ifame. I usually use an object for data instead of an iframe.

Edit:

<object style="width: 98%; margin: auto;" id="somedialog" height="300"></object>

// some code here
document.getElementById("myModal").style.display = "block";
document.getElementById("somedialog").data = url;
aurelianspodarec's avatar

@jlrdw Well, considering you do that, how would you in a sandbox, then compile CSS with tailwid based on user config file changes? The config would be stored in a global object basically as JS then.

aurelianspodarec's avatar

@Sinnbeck How would you do that offline though? Parsing the DOM via external sources might be slow depending on the user connection, but also if the user has no internet, that would be a bummer if they can't do that offline.

Btw, what do you suggest to do when loading all TailwindCSS classes? I need to generate all CSS classes so I can suggest them to people when writing the code or such. As I do want to add that feature to an IDE that I got, scan what the user writes and then just suggest the text. Or if its via dropdown have all values there.

Sinnbeck's avatar

@aurelianspodarec oh missed the offline part. There is a version by beyondcode that is open source

https://github.com/beyondcode/tailwindcss-jit-cdn

If you need autocomplete, then I would suggest finding the source for for the autocomplete plugin for vscode and reverse engineer it

But overall I am not quite sure what it you are building and why, so it's hard to give proper suggestions. There are already tools out there like windy (beyondcode) that might already do what you are trying to

2 likes
aurelianspodarec's avatar

@Sinnbeck I'm building something like Webflow but just for TailwindCSS only.

A no-code tool but also gave the dev part if needed, and for the no-code tool, ofc the classes and all that needs to be auto-suggested.

I've already got the dashboard working and connected things, and now I Was about to do the properties and I was like "damn this" totally didn't expect that, obviously I didn't think about the complexity of this at first lol

So when a user clicks an element, I show the appropriate widget say its an image it will show image properties and classes, or if its a div, it will get all the div elements, and then translate the classes into UI so its a click this and you get 'flex' injected into that row or whatever. But then, also match all of these classes so I know how to parse them to the UI.

its cleary a much bigger job than I though xd I think this will be the hardest part though. Everything else is complicated but not as much as this - maybe drag and drop will be also complicated but yeah, this here is a massive roadblock now lol

Thanks I will read that and think about it more. First time doing such project too :D

Sinnbeck's avatar

@aurelianspodarec yeah getting tailwind to output what you need can be tricky as it always removes what it does not need. And just serving every single class would result in a css file of several megabytes. But perhaps you can get some ideas from that cdn (you can perhaps somehow embed it it your own Javascript code)

2 likes
aurelianspodarec's avatar

@Sinnbeck Oh damn. True. I'm forgetting how this works lol

That has the actually compiled JS code that gets executed.

Ah, okay.

I need some zoom out from this, and test some things and comeback then lol

Thanks for now :D

Please or to participate in this conversation.