Tailwind CSS 重构博客页面的实践

从手写 CSS 到 Tailwind

之前博客用的是手写 CSS，虽然也能工作，但维护起来很痛苦。每次加新页面都要想 class 名字，还要确保不和已有的样式冲突。不同页面的卡片样式经常不一致，改一个地方容易漏掉其他地方。

最近终于下定决心全面迁移到 Tailwind CSS。选择 Tailwind v4 是因为它用 CSS-first 的配置方式，比之前的 JS 配置更直观。

配置和设计令牌

CSS 变量系统

Tailwind v4 用 @theme 指令定义设计令牌，直接在 CSS 里写就行：

@theme {
  --color-brand: #6366f1;
  --color-ink: #f4f4f5;
  --color-muted: #a1a1aa;
  --color-bg: #09090b;
}

深色模式用 @custom-variant dark 配合 .dark class 实现，比 media query 更灵活，可以手动切换。

卡片统一风格

之前每个页面的卡片样式都不一样。现在统一成了一套毛玻璃风格：

• 边框：border-white/10
• 背景：bg-white/[0.03]
• 模糊：backblur
• hover：hover:bg-white/[0.06] hover:border-white/20

这套设计语言用在导航栏、文章卡片、统计面板等所有组件上，视觉一致性好了很多。

响应式设计

Tailwind 的 sm: md: lg: 前缀让断点处理变得很直观。博客的三栏布局用 CSS Grid 实现：

// 三栏布局：手机单栏，平板两栏，桌面三栏
className="grid grid-cols-1 sm:grid-cols-[260px_1fr] lg:grid-cols-[260px_1fr_280px]"

移动端收起侧边栏，显示汉堡菜单。中等屏幕显示侧边栏和内容区。桌面端再加一个右侧统计面板。

踩坑和总结

transition 不能加在全局

之前试过在 * 上加 transition，结果导致页面首次加载时所有元素都有过渡动画，出现了明显的 FOUC（Flash of Unstyled Content）。后来改成只在需要交互的元素上加 transition-colors 或 transition-all，问题解决了。

class 名字太长

Tailwind 的一个缺点是 class 字符串太长，可读性差。我的解决方法是把常用的样式组合提取成组件，比如 PostCard、EmptyState 这些，内部写好完整的 class，外部只传数据。

整体来说，迁移到 Tailwind 之后开发效率提升了不少。样式一致性好了，也不用再维护一堆 CSS 文件了。