CDN引入完全够用且更推荐用于原型开发，10分钟内可完成响应式页面预览；它免配置、改完即见，但不支持JIT、自定义主题等高级功能，需注意viewport设置与class分层使用。
能用 CDN 就别折腾本地构建，10 分钟内完成可预览的响应式页面是完全可行的。
CDN 引入是否足够用于原型？
够用，而且更推荐。原型阶段的核心诉求是“改完即见”，CDN 提供的是完整、已编译的工具类集合，无需配置 tailwind.config.js、postcss.config.js 或运行构建命令。只要网络通，https://cdn.jsdelivr.net/npm/tailwindcss@^3.4/dist/tailwind.min.css 这一行 <link> 就能启用全部类名。
注意点：
- CDN 版本不支持 JIT 模式下的“按需生成”，所有类都已打包，但对原型来说体积不是瓶颈
- 不能使用
@layer、自定义theme.extend等高级配置能力——原型通常也不需要 - 确保
<head>中<meta name="viewport">存在，否则响应式断点（如md:）不会生效
怎么避免 class 堆砌失控？
原子类不是无脑叠加，关键在结构分层和语义锚点。比如写一个卡片组件，先定容器骨架，再填内容样式，而不是从第一个 div 就开始套 bg-gray-50 p-6 rounded-lg shadow-sm。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
flex/grid/prose这类布局类作为“结构主干”，再用text-、bg-、hover:等修饰类做“细节微调” - 响应式类尽量成组出现：
flex flex-col md:flex-row gap-4比分散写md:flex-row和md:gap-4更易维护 - 避免在同一个元素上混用冲突类，例如
text-center text-left—— Tailwind 不会报错，但后者覆盖前者，容易漏查
哪些交互必须配 JS？Tailwind 能覆盖到什么程度？
Tailwind 本身不处理 DOM 逻辑，所有状态切换（如菜单展开、轮播切换、深色模式开关）都需要少量 JS 配合。但它极大简化了状态样式表达。
常见搭配方式：
- 菜单折叠：用 JS 切换
hidden/block类，而不是操作style.display - 深色模式：在
<html>上加darkclass，然后用dark:bg-gray-800、dark:text-gray-200控制样式 - 表单反馈：JS 设置
invalidclass，再用:invalid:border-red-500实现校验样式 - 轮播位移：用
transform+transition-transform配合 JS 修改style.transform，比手写 CSS 动画快得多
为什么“写 HTML 即写样式”反而更可控？
因为样式意图和 DOM 结构强绑定，不存在“这个 class 在哪定义的？”“它到底影响了哪些元素？”这类排查成本。你看到的 class 就是它正在做的唯一一件事。
但这也意味着：
- 不要复制粘贴整段带 class 的 HTML 块去复用——结构变了，class 往往也要重审
- 删 HTML 元素时，务必同步清理其专属 class，否则残留类可能在别处意外生效
-
!important在 Tailwind 中几乎不需要，真遇到优先级问题，说明类组合逻辑有误，该重构而非覆盖
真正卡住原型进度的，从来不是类名记不住，而是没想清楚容器关系和断点切换点。把 grid/flex 布局搭稳，其余都是填空题。
