从Tailwind迁移到原生CSS：一个程序员的学习笔记和实际体验

加拿大程序员Julia Evans（jvns.ca）在2026年5月分享了她从Tailwind CSS迁移到原生CSS的学习笔记。这篇文章不是”Tailwind不好”的吐槽，而是一个真实的技术决策过程：什么时候该用Tailwind，什么时候原生CSS反而更好？

为什么考虑迁移

Julia在使用Tailwind一段时间后，发现自己遇到了一些痛点：

• HTML变得很长：当一个元素有十几个Tailwind类名时，HTML变得难以阅读
• 自定义样式困难：某些效果用Tailwind的工具类难以表达，需要写自定义CSS
• 学习成本：需要记住大量的Tailwind类名，而原生CSS属性名是标准化的

迁移过程中学到的东西

1. CSS已经很好用了

Julia发现，现代CSS（特别是CSS Grid和Flexbox）已经足够强大，许多以前需要框架才能实现的布局，现在用原生CSS几行就能搞定。

/* 以前需要框架的响应式布局 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

2. 自定义属性（CSS Variables）非常实用

CSS自定义属性可以替代Tailwind的设计令牌系统，而且更灵活：

:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
  --radius: 0.5rem;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  border-radius: var(--radius);
}

3. 媒体查询可以很简洁

配合CSS容器查询（Container Queries），响应式设计变得更加直观：

@container (min-width: 600px) {
  .card { flex-direction: row; }
}

4. 选择器嵌套现在原生支持了

CSS嵌套（Nesting）已经在所有主流浏览器中得到支持，不再需要Sass/Less：

.nav {
  background: white;
  
  & a {
    color: blue;
    &:hover { color: darkblue; }
  }
}

什么场景Julia仍然选择Tailwind

Julia并不是完全否定Tailwind。她认为以下场景Tailwind更有优势：

• 快速原型：需要快速搭建页面时，Tailwind的工具类比写CSS快得多
• 团队项目：多人协作时，Tailwind提供了一致的样式约定
• 组件库：如果项目使用基于Tailwind的组件库（如shadcn/ui），继续用Tailwind更合理

给站长和前端开发者的建议

Julia的经验对站长和前端开发者有几个实际参考价值：

1. 不要盲目跟风：Tailwind很流行，但不一定适合所有项目。个人博客、小型项目用原生CSS可能更简单
2. 学习现代CSS：CSS Grid、Flexbox、Container Queries、CSS Nesting等新特性已经足够强大，值得花时间学习
3. 渐进式迁移：如果想从Tailwind迁移，可以逐步替换，不需要一次性重写
4. 根据项目选择：大型团队项目用Tailwind，小型个人项目用原生CSS，没有绝对的对错

实用资源

• Julia Evans原文
• MDN CSS Grid文档
• MDN Container Queries文档

本文参考来源：Moving away from Tailwind – Julia Evans