TailwindCDN breaks when loading a custom plugin within an iframe

[g-danna]

What version of Tailwind CSS are you using?

v3.7.2

What build tool are you using?

parcel v2.0.0, but it seems unrelated (also tried on esbuild v0.17.19)

What version of Node.js are you using?

v14.18.1 (also tried on v18.14.2)

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

Reproduction URL

https://codesandbox.io/s/tailwindcdn-with-cusotm-plugins-in-iframe-gj9fkl

Describe your issue

TailwindCDN breaks when loading a custom plugin within an iframe.

It works flawlessly with custom plugins outside iframes, as you can see at this CodeSandbox link. Here, the logic is similar to one of the bug reproduction – the assigned tailwind.config is the same.

However, when you place it within an iframe, it throws "raws is undefined" from ...t[1].raws.tailwind in the producion code.

The issue seems to be adding plugins. If you uncomment the example custom plugin from the plugins array in the bug reproduction code (/index.mjs, line 23), it loads properly.

Am I doing something wrong? I'd be happy to contribute.

[thecrypticace]

Hey, this is because styles of a parent document do not and cannot apply to the documents of loaded iframes. This is a browser limitation — it's basically the same-origin policy but a bit stricter. An iframe is meant to basically load a separate browser window into a view on the page.

The only way to use the CDN in an iframe like this is to load the CDN itself in the iframe.

[thecrypticace]

Wait, I think I misunderstood what's happening here. The setup you have is odd but I can't think of a reason why it should be erroring like that. Gonna look into it more.

[g-danna]

Yes, Tailwind CDN itself is loaded into the iframe, hence the weird setup 😄. Let me know if I can help in way.

Sorry for the closing/reopening

[thecrypticace]

Okay so the issue here is that the object passed to addUtilities are created in a different context (the parent window/document versus the iframe). This means that the prototype points to Object.prototype of a different document. This is because addRelativeFontSizesPlugin itself loaded by the parent document / context rather than from inside the iframe.

This means that this comparison returns false:

Object.getPrototypeOf(my_object_representing_utilities) === Object.prototype

We use this as one of the checks in our isPlainObject helper for detecting whether or not objects passed to addUtilities (and other methods) are valid.

Not sure if this is something we should even try to fix given that it's a super weird situation and can't happen under normal circumstances. I would recommend separating your init code into a separate file and then injecting a script pointing to that in the iframe.