欢迎体验全新 Msg2me 社区!
Msg2me — 全新构架 · 安全 · 先进,替代 Discuz/WordPress 的新一代门户,基础版完全免费

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 是倒退的同学,评论区来辩。
评论 (5)
登录 后评论
设计师小美
设计师小美 2026-09-06
Tailwind + Vue 是绝配,开发效率翻倍。
1楼
高翔55
高翔55 2026-09-06
我也遇到过类似的情况
2楼
程序员老王
程序员老王 2026-09-06
同意,就是HTML看起来有点长,但习惯了就好。
3楼
军事迷
军事迷 2026-09-09
说得很有道理,学到了!
4楼
设计师小美
设计师小美 25 天前
这个观点我不太认同,不过还是感谢讨论
5楼
相关推荐

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 是倒退的同学,评论区来辩。
话题: #前端
评论 (5)
登录 后评论
设计师小美
设计师小美 2026-09-06
Tailwind + Vue 是绝配,开发效率翻倍。
1楼
高翔55
高翔55 2026-09-06
我也遇到过类似的情况
2楼
程序员老王
程序员老王 2026-09-06
同意,就是HTML看起来有点长,但习惯了就好。
3楼
军事迷
军事迷 2026-09-09
说得很有道理,学到了!
4楼
设计师小美
设计师小美 25 天前
这个观点我不太认同,不过还是感谢讨论
5楼