How can i import my globals.css styles into an iframe
Answered
Pacific sand lance posted this in #help-forum
Pacific sand lanceOP
Does anyone know how to import the tailwinds globals.css into an iframe?
I'm currently using a CDN but i need my own ones from my app, not the cdn.
I'm currently using a CDN but i need my own ones from my app, not the cdn.
Answered by B33fb0n3
open the source code for the requested url. Import the global.css on top. You can't do it for a page that you don't own
--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
11 Replies
@Pacific sand lance Does anyone know how to import the tailwinds globals.css into an iframe?
I'm currently using a CDN but i need my own ones from my app, not the cdn.
you can't. The requested page decides how it will look like. So when you want to add your globals.css to your iframe page, you need to change the underlying page itself and add it there
@B33fb0n3 you can't. The requested page decides how it will look like. So when you want to add your globals.css to your iframe page, you need to change the underlying page itself and add it there
Pacific sand lanceOP
Can you elaborate further on how to achieve this. Thanks
@Pacific sand lance Can you elaborate further on how to achieve this. Thanks
open the source code for the requested url. Import the global.css on top. You can't do it for a page that you don't own
--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://nextjs-forum.com/post/1319571940238823506#message-1319580104430583818)
Answer
@B33fb0n3 open the source code for the requested url. Import the global.css on top. You can't do it for a page that you don't own
--- Edit
And as you saw you might also want to change the url of the iframe too [(see here)](https://discord.com/channels/752553802359505017/1319571940238823506/1319580104430583818)
Pacific sand lanceOP
Dope. Thanks...
Any idea how I would import my font styles and my theme colors?
THe component look good now, all the styles are there. Except for the theming and fonts
@Pacific sand lance Any idea how I would import my font styles and my theme colors?
the only thing that you can modify for an iframe is the url. So provide a query param for example inside the url that's the correct theme. Like
/my/url/path?theme=aqua or simliarPacific sand lanceOP
I got it, thanks a lot. You can make custom styles and apply to the Link when rendering the iframe, useeffect to switch up the themes
Much appreciated, saved me a bunch of time
happy to help