开发者弃用 Tailwind 之后，重新学习使用 CSS

八年前，Julia Evans 曾热情洋溢地写文章介绍她刚发现 Tailwind 的喜悦。当时她完全不知道如何组织 CSS 代码，在"一团乱麻"和"Tailwind"之间，她毫不犹豫地选择了后者。Tailwind 帮助她搭建了大量小型网站。

八年后，她用了大约一周时间把几个网站从 Tailwind 迁移到更语义化的 HTML + 原生 CSS，并记录下了这个过程中学到的东西。

Tailwind 教给她的，其实比想象多

刚开始考虑如何组织 CSS 时，她其实有些畏惧："我不擅长组织 CSS！"但读了几篇关于如何组织 CSS 的博客文章后（包括"A whole cascade of layers"和"How I write CSS in 2024"），她意识到：每个 CSS 代码库其实都有多件不同的事情在同时发生——布局、字体、颜色、通用组件……有一套系统或指南来管理这些是非常有用的，而 Tailwind 已经提供了一些这样的系统。区别只在于，现在她可以模仿这些系统，而不是被它们束缚。

她从 Tailwind 借鉴了以下系统：reset 样式表、色彩调色板、字体大小阶梯。

CSS 重建的九大方面

1. Reset

她直接复制了 Tailwind 的 preflight 样式（大约前 200 行）。比如 Tailwind 对所有元素设置 box-sizing: border-box（元素宽度包含 padding）。她意识到，离开这些规则后会很不习惯。

2. 组件

核心思路是用类似 Vue/React 组件的方式组织 CSS：每个组件有唯一的类名，组件 CSS 不会覆盖其他组件的样式，每个组件有自己的 CSS 文件。编辑一个组件的 CSS 时不会意外破坏另一个组件。这种方式让她可以只专注于 100 行代码，而不是整个代码库。

3. 颜色

colours.css 文件中列出所有 CSS 变量作为调色板。规则是：网站上使用的所有颜色都必须在这个文件里定义。

4. 字体大小

Tailwind 的 font scale 让她可以不用纠结于 rem、em 或 px，只要想着"我要大字"然后写 text-lg 就好。她从 Tailwind 借鉴了变量定义方式，比如 --size-lg、--line-height-lg，然后在需要的地方引用。

5. 工具类

一些在多个组件中出现的样式（如 .sr-only 用于屏幕阅读器专用内容）被她称为"工具类"。她从 Tailwind 复制了一部分，并谨慎地维护这个区域。

6. 基础样式

"基础"样式是整个站点都适用的全局样式。目前她只设置了两条：section 的内列宽度，以及 a 标签的颜色。

7. 间距

她正在尝试让外层布局组件负责间距，而不是到处随手加 margin 和 padding。比如用 section > + { margin-top: 1rem; } 来均匀分布子元素。参考了"猫头鹰选择器"和"no outer margin"等理念。

8. 响应式布局：多用 Grid

以前在 Tailwind 里做响应式靠大量媒体查询。现在她尝试用更灵活的 CSS Grid 布局来减少断点。她大量使用了 auto-fit 来自动实现大屏双列、小屏单列的布局，以及 grid-template-areas——这是 Tailwind 无法做到的事情。

9. 构建系统：esbuild

开发环境不需要构建系统，因为现代 CSS 支持 @import 和嵌套选择器。生产环境用 esbuild 打包，因为它是基于 Web 标准且静态的 Go 二进制文件。

为什么离开 Tailwind

几个原因促使她做出这个决定：Tailwind 自 2018 年以来对构建系统的依赖越来越强，她一直在用 Tailwind v2，导致项目中存在 2.8MB 的 tailwind.min.css 文件（ gzip 后 270K），这让她觉得有点可笑；她的 CSS 能力已经比刚开始用 Tailwind 时强很多，不想再被框架的边界限制；最后，她在项目中混用了原生 CSS 和 Tailwind，维护起来非常痛苦。

她坦承 Tailwind 的限制有时是非常有用的——这篇文章大量内容就是在重新实现 Tailwind 的那些限制。但到了某个阶段，她希望能够自己选择什么时候用框架、什么时候跳出框架。

"CSS 很难，因为它在解决一个很难的问题"

关于 CSS，她还提到了另一件事：她曾经对 CSS 持一种类似"CSS 是简单的，所以它应该容易"的态度，但经过十年学习，她真正爱上了 CSS 并尊重它。把"CSS 很困难"当作学习它的动力，让她发现许多沮丧（"居中是不可能的"）其实早在 CSS 中早就解决了。CSS 的难度来自于它在解决一个困难的问题。

参考来源 https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/