八年后从 Tailwind 迁移到原生 CSS，她都学到了什么？

【导语八年前Julia Evans 用 Tailwind 搭建了大量小型网站八年后她花一周时间将网站从 Tailwind 迁移到更语义化的 HTML 原生 CSS并记录下迁移过程中学到的东西。】Tailwind 带来的系统借鉴Julia Evans 刚开始组织 CSS 时有些畏惧但读了关于组织 CSS 的博客文章后意识到每个 CSS 代码库有布局、字体、颜色等多件事同时发生而 Tailwind 已提供了一些管理系统。她从中借鉴了 reset 样式表、色彩调色板、字体大小阶梯等系统。CSS 重建的九大方面在重建过程中她从多个方面进行了改进。在 Reset 方面直接复制 Tailwind 的 preflight 样式组件采用类似 Vue/React 组件的方式组织 CSS颜色通过 colours.css 文件列出所有 CSS 变量作为调色板字体大小借鉴 Tailwind 的变量定义方式工具类复制了 Tailwind 一部分并谨慎维护基础样式设置了 section 的内列宽度和 a 标签颜色间距尝试让外层布局组件负责响应式布局多用 CSS Grid 减少断点生产环境用 esbuild 打包。离开 Tailwind 的原因促使她离开 Tailwind 的原因有几个。Tailwind 自 2018 年以来对构建系统依赖增强项目中存在 2.8MB 的 tailwind.min.css 文件gzip 后 270K她的 CSS 能力提升不想被框架边界限制项目中混用原生 CSS 和 Tailwind 维护痛苦。编辑观点Julia Evans 的迁移过程为开发者提供了从框架到原生 CSS 的实践参考体现了技术成长中对自主选择和灵活性的追求。