在开发过程中如何在 iFrame 中使用 tailwind？
目前，当我添加新样式时，我正在创建一个新的 css 文件
npx tailwindcss build src/assets/css/tailwind.css -o dist/assets/css/index.css
并在我的 iFrame 中链接这个文件，但这有点烦人......在开发过程中是否有更好的方法来做到这一点？
您可以将 tailwind cdn 注入到 iframe 中。
工作演示：https://codesandbox.io/s/elastic-pascal-3y46c5
自动注入顺风演示： https://codesandbox.io/s/silly-goldwasser-5o50bx ?file=/index.html
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<script>
function etw() {
var iframe = document.getElementById("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var tw = iframeDoc.createElement("script");
tw.setAttribute("src", "https://cdn.tailwindcss.com");
tw.onload = function () {
iframeDoc.body.innerHTML = iframeDoc.body.innerHTML; //re-render
};
iframeDoc.head.appendChild(tw);
}
</script>
<body>
<iframe id="iframe" src="/hello.html" title="IFrame"></iframe>
<button onclick="etw()">click to enable tailwind in the iframe</button>
</body>
</html>
hello.html:
<div class="bg-red-500 text-xl p-5 rounded-full">
class="bg-red-500 text-xl p-5 rounded-full" div
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<script>
function etw() {
var iframe = document.getElementById("iframe");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var tw = iframeDoc.createElement("script");
tw.setAttribute("src", "https://cdn.tailwindcss.com");
tw.onload = function () {
iframeDoc.body.innerHTML = iframeDoc.body.innerHTML; //re render
};
iframeDoc.head.appendChild(tw);
}
window.addEventListener("DOMContentLoaded", function () {
iframe.contentWindow.addEventListener("DOMContentLoaded", etw);
});
</script>
<body>
<iframe id="iframe" src="/hello.html" title="IFrame"></iframe>
</body>
</html>
使用 Play CDN 直接在浏览器中尝试 Tailwind，无需任何构建步骤。Play CDN 仅为开发目的而设计，并不是生产的最佳选择。
| 归档时间： |
|
| 查看次数： |
2111 次 |
| 最近记录： |