不是我杠。是真的用了一段时间之后，我开始怀疑，我到底是在写样式，还是在拼？？
Inline-style 再丑，好歹直觉。Tailwind，看起来像原子，其实是一坨。
👀背景：Tailwind 被当成“现代样式解决方案”
你一定见过类似这样的：
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
登录
</button>
确实很酷，什么都写一行 class 里。但你再看看下面这段：
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 p-6 space-y-4 text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl">
...
</div>
我写完后，心情只有一句话能总结：为什么我要把所有的 CSS 都写成 className？
🤬槽点一：可维护性堪忧
一个按钮组件长这样：
<button
className="px-4 py-2 bg-blue-500 text-white text-sm font-semibold rounded hover:bg-blue-600 transition duration-300 ease-in-out"
>
提交
</button>
你以为这就完了？
等产品说：“按钮再小一点，圆角再圆一点”。
你要重新调 px-4 → px-3、rounded → rounded-full……
而不是改变量、不是改样式文件，而是全靠人眼和记忆，找 class 里哪个是 spacing，哪个是颜色。
和 inline-style 有什么区别？
而且 inline-style 至少还能写成：
<button style={{
padding: '8px 16px',
backgroundColor: '#3490dc',
color: '#fff',
borderRadius: '0.375rem'
}}>提交</button>
你能打断点调试、能直接覆盖、能动态传值，最重要：不用记忆 Tailwind 的语法花式组合。
🧨槽点二：组件封装困难，一改样式全组件污染
比如一个卡片组件你这么写：
<div className="shadow-lg rounded-lg p-4 bg-white hover:shadow-xl transition">
...
</div>
现在业务需求变了，要加深背景色。
你要改多少个地方？
- 不是改一行 SCSS
- 是改每个调用这个组件的地方，把 class 给 override 掉
- 否则你就要引入 class 合并方案（比如
clsx、classnames），然后组件里开始像下面这样：
<div className={clsx(
"shadow-lg rounded-lg p-4",
dark && "bg-gray-900 text-white",
!dark && "bg-white text-black"
)}></div>
代码变复杂了、样式“还是耦合”，所谓“可组合”的前提，是你每次都要组合。
🧠对比 Inline-style：是简陋，但更清晰
<div style={{
boxShadow: dark ? '0 4px 20px rgba(0,0,0,0.5)' : '0 2px 10px rgba(0,0,0,0.1)',
borderRadius: '8px',
padding: '16px',
backgroundColor: dark ? '#111' : '#fff'
}}></div>
优点：
- 所有属性值都可以逻辑控制
- 没有语义猜谜，不用背类名
- 更适合组件级样式，而不是页面结构级样式
你可能会说：inline-style 不能写伪类、动画、媒体查询。是的，它的短板明显，但它的“局部性”和“显性”反而成了对抗 Tailwind “横跨全组件的混乱 class”的一剂良药。
🤡再说一个离谱的场景：调试 Tailwind 的 class
当你调试下面这个 div 时：
<div class="flex justify-between items-center px-6 py-4 bg-gray-100 hover:bg-gray-200 transition duration-300 rounded-lg shadow">
打开 DevTools，看到的是这样一坨：
.flex.justify-between.items-center.px-6.py-4.bg-gray-100.hover\:bg-gray-200.transition.duration-300.rounded-lg.shadow
你根本不知道哪一段到底是生效了，哪一段被覆盖了。
你要一点点地删 class，重刷页面，看变化。
这调试体验，真不如直接在样式面板里右键编辑 style。
🤔那 Tailwind 就一无是处吗？
也不是。
- 在页面结构简单、静态页面多、交互少的场景下（比如博客、营销页），它确实能快出屎来
- Tailwind 配合 IDE 插件和设计系统用得顺手的团队，可以有极高一致性
- 和一些设计系统（比如 shadcn/ui）结合用效果不错
但你要说“公司业务系统要用 Tailwind”，那你准备好人力维护的代价了吗？
💬真实案例：我曾在一个项目中被 Tailwind 背刺
我们组件库基于 Tailwind 写，所有按钮、表格、弹窗都封在组件里。
某天需求来了，要让表格边框线颜色从灰色变成蓝色。
理论上你可以：
<Table className="border-blue-500" />
但 Tailwind 里默认的 .border 是灰色，并且 .border-blue-500 只设置边框颜色，不加 .border 是不会显示边框的。
最终变成这样：
<Table className="border border-blue-500" />
然后发现 default class 里写了 .border-gray-200，所以你还得 !border-blue-500。
一个改颜色，写了仨 class，还得加 !important。
这不是原子，这是原地爆炸。
🎁Tailwind 是流行，但它不是银弹
它解决的是 CSS 组织问题， 对于有清晰 UI 系统、有规范团队、能统一开发规范的中大型项目，Tailwind 可以用。
但对于组件频繁改动、逻辑复杂、样式经常联动变更的业务系统——inline-style 可能真的更直接，更可控。
你们怎么看？🙂
