Tailwind CDN默认不生效，因其v3+仅提供空@layer占位符；唯一可行CDN方案是play.tailwindcss.com生成版或unocss/twind运行时，但存在首屏慢、无法tree-shake等问题；推荐unocss + CDN组合，通过引入runtime脚本实现HTML中类名按需解析。
CDN引入Tailwind为什么默认不生效
直接在HTML里用<link>引入Tailwind的CDN（比如BootCDN上的tailwindcss@3.4.3），样式完全没反应——不是你写错了，是Tailwind从v3开始就不提供“开箱即用”的预编译CSS了。CDN上那个文件只是空的@layer占位符，没有实际类名定义。
真正能跑起来的CDN方案只有一种：用官方提供的play.tailwindcss.com生成的实时构建版，或自己用unocss/twind这类运行时方案。但它们都有代价：首屏渲染慢、无法tree-shake、调试困难。
- 别信网上“一行CDN搞定Tailwind”的教程，基本都过时或误导
- 如果你只是想快速画个表单/卡片原型，
unocss+ CDN的组合更现实（见下一条） - CDN版Tailwind对
@apply、自定义theme、dark:变体全都不支持
用unocss + CDN快速启动原子类开发
比硬套Tailwind CDN更靠谱的做法：引入unocss运行时，它能按需解析你在HTML里写的类名（比如text-blue-500、flex gap-2），当场生成对应CSS。不需要构建工具，也不用配tailwind.config.js。
实操只需两步：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>里加：<script src="https://unpkg.com/unocss@0.59.7/runtime/index.js"></script> - 再加一行初始化脚本：
<script>UnoCSS({ mode: 'class' })</script> - 然后就可以直接写
<div class="p-4 bg-gray-100 rounded">，它会自动生效
注意：默认只支持基础语法，想用hover:、md:等变体，得额外加attributify插件或手动开启variants选项——多数原型阶段其实不需要。
BootCDN上的Bootstrap 5.x可以直接用，但别碰JS组件
BootCDN上的bootstrap@5.3.3 CSS和JS文件是完整可运行的，container、btn btn-primary这些类名一贴就出效果，适合做低保真布局验证。
但JS组件（Modal、Dropdown、Toast）必须满足两个前提才工作：
- 页面已加载
bootstrap.bundle.min.js（含Popper），不能只引bootstrap.min.js -
data-bs-*属性必须拼写准确，比如data-bs-toggle="modal"，漏掉bs-前缀就静默失败 - 如果用ESM方式动态import，CDN返回的是UMD模块，需用
export * from桥接，否则Modal.getInstance()会报undefined
原型阶段该选哪个：看你要动几次DOM
如果只是把设计稿转成静态页面、不交互、不换主题、不改断点——Bootstrap CDN最快，5分钟搭完。
如果要反复增删元素、尝试不同间距/颜色、可能加暗色模式——unocss更省事，改class就行，不用来回切配置文件。
最容易被忽略的一点：所有CDN方案都会让DevTools里的CSS来源变成blob:或runtime.js，没法直接点击跳转源码定位问题。调样式时得靠Computed面板反查，而不是习惯性点Styles侧边栏。
