从 CVSS 惨案到全组人人都写 Tailwind,一年实践下来的一些真心话。
【一、为什么值得换】
写样式不再起名困难。BEM 命名是心智负担,utility class 直接消灭这个问题;设计 token(间距、颜色、圆角)天然统一,新人写出来的页面也不会跑偏。
【二、正确的心智模型】
Tailwind 不是内联样式。它是把设计系统编译进类名。配合 @apply 抽高频组合、CVA 管理组件变体,可维护性完全不是问题。
【三、性能真相】
JIT 引擎只输出用到的 CSS,生产包普遍 10KB 上下,比大多数手写 CSS 项目还小。别再用 CDN 全量版了,那不是正确姿势。
【四、团队落地经验】
第一周抗拒,第二周真香是普遍规律。落地三招:prettier-plugin-tailwindcss 统一类名排序;把品牌色抽象成语义 token(primary/surface/danger);复杂组件抽成组件库而不是堆长类名。
【五、什么时候不适合】
重度动效、复杂伪元素嵌套的场景,还是要配合少量手写 CSS。工具是为你服务的,别本末倒置。
对抗意见也欢迎:觉得 utility-first 是倒退的同学,评论区来辩。
Tailwind CSS 实战:从入门到精通
从 CVSS 惨案到全组人人都写 Tailwind,一年实践下来的一些真心话。
【一、为什么值得换】
写样式不再起名困难。BEM 命名是心智负担,utility class 直接消灭这个问题;设计 token(间距、颜色、圆角)天然统一,新人写出来的页面也不会跑偏。
【二、正确的心智模型】
Tailwind 不是内联样式。它是把设计系统编译进类名。配合 @apply 抽高频组合、CVA 管理组件变体,可维护性完全不是问题。
【三、性能真相】
JIT 引擎只输出用到的 CSS,生产包普遍 10KB 上下,比大多数手写 CSS 项目还小。别再用 CDN 全量版了,那不是正确姿势。
【四、团队落地经验】
第一周抗拒,第二周真香是普遍规律。落地三招:prettier-plugin-tailwindcss 统一类名排序;把品牌色抽象成语义 token(primary/surface/danger);复杂组件抽成组件库而不是堆长类名。
【五、什么时候不适合】
重度动效、复杂伪元素嵌套的场景,还是要配合少量手写 CSS。工具是为你服务的,别本末倒置。
对抗意见也欢迎:觉得 utility-first 是倒退的同学,评论区来辩。
【一、为什么值得换】
写样式不再起名困难。BEM 命名是心智负担,utility class 直接消灭这个问题;设计 token(间距、颜色、圆角)天然统一,新人写出来的页面也不会跑偏。
【二、正确的心智模型】
Tailwind 不是内联样式。它是把设计系统编译进类名。配合 @apply 抽高频组合、CVA 管理组件变体,可维护性完全不是问题。
【三、性能真相】
JIT 引擎只输出用到的 CSS,生产包普遍 10KB 上下,比大多数手写 CSS 项目还小。别再用 CDN 全量版了,那不是正确姿势。
【四、团队落地经验】
第一周抗拒,第二周真香是普遍规律。落地三招:prettier-plugin-tailwindcss 统一类名排序;把品牌色抽象成语义 token(primary/surface/danger);复杂组件抽成组件库而不是堆长类名。
【五、什么时候不适合】
重度动效、复杂伪元素嵌套的场景,还是要配合少量手写 CSS。工具是为你服务的,别本末倒置。
对抗意见也欢迎:觉得 utility-first 是倒退的同学,评论区来辩。
Topics:
#前端
댓글 (5)
로그인 to comment
设计师小美
2026-09-06
Tailwind + Vue 是绝配,开发效率翻倍。
高翔55
2026-09-06
我也遇到过类似的情况
程序员老王
2026-09-06
同意,就是HTML看起来有点长,但习惯了就好。
军事迷
2026-09-09
说得很有道理,学到了!
设计师小美
25 일 전
这个观点我不太认同,不过还是感谢讨论
댓글 (5)