Hacker News 中文摘要

RSS订阅

告别Tailwind，重构CSS结构之道 -- Moving away from Tailwind, and learning to structure my CSS

原文链接 | HN讨论 | 2026-05-16 23:43:49

文章摘要

作者回顾了8年前使用Tailwind的经历，认为当时它帮助自己解决了CSS结构混乱的问题。最近她将几个网站从Tailwind迁移到原生CSS，发现这个过程既有趣又有意义，开始学习如何更好地组织CSS代码。

文章总结

告别Tailwind：探索CSS结构化之路

作者背景

Julia Evans是一位非全职前端开发者，她的CSS学习经历是断断续续积累多年的。8年前她曾热情地写过发现Tailwind的喜悦，当时她完全不知道如何组织CSS代码。

迁移原因

最近一周，作者将几个网站从Tailwind迁移到更具语义化的HTML+原生CSS，并从中获得了很多乐趣和启发。主要迁移原因包括： 1. 新版Tailwind对构建系统的依赖增强 2. 她项目中存在2.8MB的未优化CSS文件 3. 她的CSS技能已显著提升 4. Tailwind在某些创意CSS实现上存在限制 5. 项目中原生CSS和Tailwind混用导致维护困难

从Tailwind学到的经验

作者发现Tailwind教会了她很多CSS组织方法： 1. 每个CSS代码库都包含多种元素（布局、字体、颜色、通用组件等） 2. 需要系统或规范来管理这些元素 3. 可以借鉴Tailwind中喜欢的系统

新的CSS结构体系

作者建立了一套包含9个方面的CSS规范体系：

1. 重置样式

直接复制了Tailwind的"preflight样式"，包括box-sizing: border-box等已成为她习惯的默认设置。

2. 组件化组织

  • 每个组件有唯一类名
  • 组件CSS互不干扰
  • 每个组件有独立CSS文件
  • 使用嵌套选择器语法

3. 颜色管理

保留颜色变量集中管理： css :root { --pink: #fea0c2; --red: #f91a55; }

4. 字体尺寸

借鉴Tailwind的字体分级系统，使用rem单位： css --size-xs: 0.75rem; --size-sm: 0.875rem;

5. 工具类

保留少量实用类如.sr-only（屏幕阅读器专用）

6. 基础样式

目前仅保留最基础的全局样式： css section { padding: 3rem max(1rem, (100% - var(--inner-width))/2); }

7. 间距系统

采用更系统化的间距管理，参考： - 猫头鹰选择器 - 无外间距原则

8. 响应式设计

减少媒体查询，更多使用CSS Grid： css grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));

9. 构建系统

开发时使用原生CSS功能，生产环境使用esbuild打包。

深层思考

作者提到两篇影响她决策的文章： 1. Tailwind与CSS的女性特质 - 关于如何正确看待CSS的复杂性 2. 为什么我们对Tailwind无法达成共识

她认为CSS的难度源于它要解决的本身就是复杂问题，而近年来CSS的新特性（如Grid、Flexbox等）实际上已经大大降低了使用难度。

致谢

特别感谢Melody Starling为wizardzines.com设计的CSS，以及CSS社区分享的大量优质资源。

评论总结

以下是评论内容的总结，平衡呈现不同观点并保留关键引用：

反对Tailwind的观点：

  1. 破坏关注点分离原则

    • "Tailwind is an anti-pattern that breaks separation of concerns rule" (grzes)
    • "Tailwind instead pushes the dev into a CSS-first approach... throw yet-another-div into the DOM" (TonyAlicea10)

  2. 影响开发者技能成长

    • "Tailwind makes you worse as a web developer... produce future-proof readable HTML" (TonyAlicea10)
    • "Every argument boils down to 'I never learnt CSS beyond a junior level'" (JimDabell)

  3. 语义化与可访问性问题

    • "The opening example on Tailwind’s website is nothing but divs and spans" (TonyAlicea10)
    • "HTML is marking up the meaning of the document. You should start there" (TonyAlicea10)

支持/中立Tailwind的观点：

  1. 实用性与开发效率

    • "Tailwind solved the 'I’m building React components' approach" (TonyAlicea10)
    • "Utility classes... what power they bring" (EugeneOZ)

  2. CSS管理替代方案

    • "Svelte and LLM completely removed my need for Tailwind" (KolmogorovComp)
    • "Angular scopes CSS to components by default" (stephbook)

  3. 对传统CSS的反思

    • "Separating HTML and CSS... is just burying the head in the sand" (raincol)
    • "HTML and CSS are the same kind of concerns: the presentation layer" (raincol)

其他相关观点：

  • 技术轮回：
    "Nature is healing" (NetOpWibby) / "We’re going a full circle back now" (neya)
  • 轻量替代方案：
    "Pico is usually enough" (BoredPositron) / "Tachyons successor with no build pipeline" (hit8run)

关键争议焦点：

  • 开发范式：是否应该坚持HTML语义优先（"start with HTML meaning" vs "CSS-first approach"）
  • 技术选择：Utility框架 vs 传统CSS（"avoid CSS collision" vs "write scalable CSS"）
  • 教育影响：Tailwind是否阻碍开发者深入理解CSS（"terrible education for new developers" vs "read the docs"）

总结呈现了评论中关于Tailwind的核心争议，包括对其设计理念、开发者技能影响及行业趋势的讨论，同时保留了正反双方的关键论据。