CSS @import 白名单

预览中允许的 CSS @import 域名与示例。

为什么有白名单？

为降低 CSS 数据外泄风险，预览组装时会过滤 CSS 面板中的 @import：仅允许 Tailwind 内置导入、与 CDN 库弹窗相同的主机，以及常见 Web 字体 CDN。须使用 https://。被拦截的规则会变为注释 /* @import blocked for preview security */。HTML 面板可用 https 的 <link rel="stylesheet"> 引入任意主机样式；CSS 面板 @import 仍受白名单约束。

允许的 script CDN 主机

与「CDN 库」弹窗注入 script 时使用的白名单一致，可用于 @import 引入 Bootstrap、normalize.css、animate.css 等库样式：

cdn.jsdelivr.net
unpkg.com
cdnjs.cloudflare.com
esm.sh
esm.unpkg.com
cdn.skypack.dev

允许的 Web 字体主机

以下字体服务主机可单独用于 @import（不必经过 jsDelivr 等 script CDN）：

fonts.googleapis.com
fonts.gstatic.com
fonts.cdnfonts.com
fonts.bunny.net
api.fontshare.com
cdn.fontshare.com
use.typekit.net

示例

在 CSS 面板写入：

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
@import url('https://fonts.cdnfonts.com/css/poppins');

仍会被拦截

CSS 面板 @import：任意不在上述列表中的域名（含自建服务器）、http:// 非加密链接。HTML 面板的 https <link rel="stylesheet"> 不受此 @import 白名单限制。导出 HTML 与预览使用同一套规则。

替代方案

若字体 CDN 不在列表中，可在 CSS 中用 @font-face 直接引用 https 的 .woff2 / .woff 文件 URL（不受 @import 白名单限制），或在 HTML 面板写 https 的 <link rel="stylesheet">。CDN 库弹窗与 pixcdn 会插入 JavaScript；对许多常见 UI 库还会自动补上对应的 CSS @import。