🧨公司非要用 Tailwind,我觉得这玩意儿不如 inline-style

不是我杠。是真的用了一段时间之后,我开始怀疑,我到底是在写样式,还是在拼??

Inline-style 再丑,好歹直觉。Tailwind,看起来像原子,其实是一坨。


👀背景:Tailwind 被当成"现代样式解决方案"

你一定见过类似这样的:

html 复制代码
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  登录
</button>

确实很酷,什么都写一行 class 里。但你再看看下面这段:

html 复制代码
<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?


🤬槽点一:可维护性堪忧

一个按钮组件长这样:

tsx 复制代码
<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-3rounded → rounded-full......

而不是改变量、不是改样式文件,而是全靠人眼和记忆,找 class 里哪个是 spacing,哪个是颜色。

和 inline-style 有什么区别?

而且 inline-style 至少还能写成:

jsx 复制代码
<button style={{
  padding: '8px 16px',
  backgroundColor: '#3490dc',
  color: '#fff',
  borderRadius: '0.375rem'
}}>提交</button>

你能打断点调试、能直接覆盖、能动态传值,最重要:不用记忆 Tailwind 的语法花式组合。


🧨槽点二:组件封装困难,一改样式全组件污染

比如一个卡片组件你这么写:

tsx 复制代码
<div className="shadow-lg rounded-lg p-4 bg-white hover:shadow-xl transition">
  ...
</div>

现在业务需求变了,要加深背景色。

你要改多少个地方?

  • 不是改一行 SCSS
  • 是改每个调用这个组件的地方,把 class 给 override 掉
  • 否则你就要引入 class 合并方案(比如 clsxclassnames),然后组件里开始像下面这样:
tsx 复制代码
<div className={clsx(
  "shadow-lg rounded-lg p-4",
  dark && "bg-gray-900 text-white",
  !dark && "bg-white text-black"
)}></div>

代码变复杂了、样式"还是耦合",所谓"可组合"的前提,是你每次都要组合。


🧠对比 Inline-style:是简陋,但更清晰

tsx 复制代码
<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 时:

html 复制代码
<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,看到的是这样一坨:

ruby 复制代码
.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 写,所有按钮、表格、弹窗都封在组件里。

某天需求来了,要让表格边框线颜色从灰色变成蓝色。

理论上你可以:

ts 复制代码
<Table className="border-blue-500" />

但 Tailwind 里默认的 .border 是灰色,并且 .border-blue-500 只设置边框颜色,不加 .border 是不会显示边框的。

最终变成这样:

tsx 复制代码
<Table className="border border-blue-500" />

然后发现 default class 里写了 .border-gray-200,所以你还得 !border-blue-500

一个改颜色,写了仨 class,还得加 !important

这不是原子,这是原地爆炸。


🎁Tailwind 是流行,但它不是银弹

它解决的是 CSS 组织问题, 对于有清晰 UI 系统、有规范团队、能统一开发规范的中大型项目,Tailwind 可以用。

但对于组件频繁改动、逻辑复杂、样式经常联动变更的业务系统------inline-style 可能真的更直接,更可控。

你们怎么看?🙂

📌 你可以继续看我的系列文章

相关推荐
Hello.Reader27 分钟前
Rust → WebAssembly 的性能剖析全指南
前端·rust·wasm
前端小巷子32 分钟前
Vue 2 Diff 算法
前端·vue.js·面试
奕辰杰4 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny6 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
_Kayo_7 小时前
VUE2 学习笔记14 nextTick、过渡与动画
javascript·笔记·学习
路光.7 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!7 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作8 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹8 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js