距离 Julia Evans 那篇热情洋溢的 Tailwind 推荐文章，已经过去了 8 年。如今，这位以「小黄纸漫画」闻名的开发者再一次引发了 HN 社区的热烈讨论——只不过这次，她要告别 Tailwind，回归语义化 HTML 和原生 CSS。
从混乱到秩序，再从框架到自由
8 年前，Evans 面对 CSS 时的心态和大多数后端开发者一样：完全不知道如何组织 CSS 代码。在「一堆混乱」和 Tailwind 之间，她毫不犹豫地选择了后者。Tailwind 帮她快速搭建了大量小型网站，但随着项目成长，框架的约束也开始显现。
过去一周，她将几个网站从 Tailwind 迁移到原生 CSS，整个过程被她形容为”既有趣又有启发”。关键发现是：Tailwind 其实已经教会了她如何组织 CSS —— 她不需要框架也能做到。
七层架构：从 Tailwind 继承的设计系统
Evans 的新 CSS 架构包含七个层次：
1. Reset（重置样式表）——直接从 Tailwind 的 preflight 复制而来。她发现自己已经对 box-sizing: border-box 等默认行为产生了依赖，换回原始 CSS 对这些隐式约定的缺失会感到不适。
2. Components（组件）——这是 CSS 的主体。每个组件有独立的 class 和文件，CSS 之间互不覆盖。像 Vue/React 组件的理念一样：修改一个组件的样式不会神秘地破坏另一个。虽然没用 @scope 等程序化隔离，但仅凭约定已经带来了巨大改善。
3. Colours（颜色）——所有颜色集中在 colours.css 中定义为 CSS 变量（--pink、--orange 等），这是整个站点唯一的颜色来源。
4. Font Sizes（字体尺寸）——借鉴 Tailwind 的 text-lg/text-xl 概念，定义了一组变量：--size-xs 到 --size-2xl，配合对应行高。用 var(--size-lg) 比直接写 1.125rem 更直观。
5. Utilities（工具类）——少量跨组件共享的样式，如 .sr-only（屏幕阅读器专用），保持精简且谨慎修改。
6. Base（基础样式）——全站统一的最少约束，目前只有两条：<section> 的 950px 居中列布局，以及链接的橙色。
7. 响应式与构建系统——从底层开始叠加样式，而非一开始就设定大量全局规则。
社区的激烈辩论
这篇文章在 HN 引发了 259 条评论，成为当日最高分话题。社区反应两极分化：
批评 Tailwind 的一方认为，Tailwind 的问题在于它颠倒了 HTML 和 CSS 的思考顺序。”HTML 标记的是文档的语义，你应该从那里开始，”一位评论者指出，”Tailwind 的 class 名让 HTML 变成了样式的附庸。”另一位开发者直言：“Tailwind 拥护者的论点归根结底是’我从没学过中级以上的 CSS’。”CSS 是一门技能，就像其他技术一样，如果团队一直躲在 Tailwind 背后，就永远不会学会它。
捍卫 Tailwind 的一方则强调：Tailwind 最大的价值在于你不必为每个元素发明 class 名称。”再也没有 BEM 命名了”是许多人的心声。此外，Tailwind 的设计约束（固定的间距、颜色、字体尺寸）本身就是一种宝贵的护栏。
不只是技术选择，更是成长路径
Evans 的文章之所以能引起如此大的共鸣，在于它触及了一个更深层的问题：框架是脚手架还是拐杖？对她来说，Tailwind 曾是脚手架——当她还不知道如何组织 CSS 时，它提供了结构。8 年后，她已经内化了这些原则，可以自信地走出框架，用自己的方式构建设计系统。
正如一位评论者所说：”Julia Evans 的写作有一种罕见的诚实——她不是为了显得聪明而写，而是为了分享她真正学到的东西。”
📎 原文：Moving away from Tailwind, and learning to structure my CSS · HN讨论：259条评论