Tailwind不是内联样式，而是基于class的工具类系统；其类名对应真实CSS规则，与style属性无关，混淆源于误将“在HTML写class”等同于“写内联样式”。
Tailwind CSS 本身不支持内联样式（style 属性），你写的任何 style="..." 都是原生 HTML 行为，和 Tailwind 完全无关——它既不会增强，也不会干扰，更不会被 JIT 编译器识别或优化。
为什么有人误以为“Tailwind 就是内联样式”
根本混淆点在于：把「在 HTML 标签里写 class」等同于「写 style 属性」。但二者技术本质完全不同：
-
class是语义锚点，指向外部定义的、可复用的 CSS 规则；style是强制覆盖，无作用域、不可继承、无法条件复用 - Tailwind 的
bg-blue-500、p-4等类名，实际对应的是.bg-blue-500 { background-color: #3b82f6; }这样的真实 CSS 规则，存在于构建产物中 - 浏览器解析
class和style是两套独立机制：style优先级永远高于 class，所以一旦混用，class很可能被静默覆盖，且你在 DevTools 的 Styles 面板里都看不到它被应用的痕迹
类名重复出现 ≠ 内联样式，但暴露了抽象缺失
当你在多个组件里反复看到一模一样的 class 组合，比如：
<div class="p-4 bg-white rounded-lg shadow-sm border border-gray-200"></div> <div class="p-4 bg-white rounded-lg shadow-sm border border-gray-200"></div>
这不是 Tailwind 的问题，而是你没做封装。正确做法是立刻提取为组件或使用 @apply：
立即学习“前端免费学习笔记（深入）”；
- React 中：
<Card>...</Card>，内部统一用该 class 组合 - CSS 文件中：
.card { @apply p-4 bg-white rounded-lg shadow-sm border border-gray-200; } - 注意：
@apply不是“回到传统 CSS”，它仍受限于 Tailwind 的配置范围（比如不能@apply margin: 2rem），本质是工具类的别名
动态拼接 class 字符串极易出错
这是中后台项目最常踩的坑。例如：
<div class={`p-4 ${isAdmin ? 'bg-red-50' : 'bg-white'} ${isExpanded ? 'max-h-[800px]' : 'max-h-24'}`}>
问题不止是可读性差，更致命的是：
- 字符串拼接漏空格（如
${foo}+${bar}变成bg-red-50max-h-[800px]）→ 浏览器当一个类名处理，失效 - 运行时值未在
tailwind.config.js中预设（如text-${color}-500中color = 'emerald'，但 config 没开 emerald 调色板）→ JIT 不生成对应规则，页面空白 - 服务端渲染（SSR）或静态生成（SSG）时，若 class 字符串含未定义变量，可能直接报错或降级为无样式
维护性差异的核心不在“写在哪”，而在“改在哪”
传统 CSS 改一个 .card 要翻 3 个文件；Tailwind 改视觉效果，只改 HTML 里的 class，看似方便，但代价是：
- 业务逻辑和表现耦合更深：权限判断
isAdmin直接决定bg-red-50，而不是通过class="card card--admin"这种语义化分层 - 搜索失效：你想找所有用了
rounded-lg的地方？grep -r "rounded-lg"会返回 200+ 行，但其中 80% 是误匹配（比如注释、路径、变量名） - 设计系统演进困难：想把所有
shadow-sm升级为shadow？必须全局替换 + 人工校验，没法像 CSS 自定义属性那样一键切换
真正影响维护性的，从来不是 class 写在 HTML 还是 CSS 文件里，而是你有没有把「哪些样式属于业务语义」和「哪些只是视觉原子」清晰切分开——Tailwind 不提供这个分层，它只提供原子，分层得你自己建。
