开发过程中如何在iFrame中使用Tailwind CSS？

• 开启Tailwind监听编译模式
  无需每次新增样式后手动执行build命令，给原有构建命令增加--watch参数，Tailwind会自动监测项目中用到的Tailwind类名，实时生成最新的CSS文件到指定目录：

npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.css --watch

如果你的项目使用Vite、Webpack等构建工具，直接接入对应框架的Tailwind官方集成插件即可，不需要单独执行监听命令，构建工具会自动处理样式编译和热更新，iFrame引入编译后的CSS文件即可同步最新样式。

• 同源iFrame动态注入样式
  如果你使用的iFrame和父页面同源，可以直接在父页面的逻辑中将Tailwind编译后的样式内容注入到iFrame的head节点中，配合热更新能力可以做到修改样式后iFrame无需手动刷新即可生效，省略文件引入的步骤。
  如果iFrame为跨域场景，优先使用监听编译的方案即可。

内容的提问来源于stack exchange，提问作者Gregor