用 Tailwind 整理样式，而不是换一种方式堆 class

博客从手写 CSS 迁到 Tailwind，并不是因为手写样式不能维护。真正的问题是当时没有稳定的设计规则：相似卡片用了不同的透明度，页面间距靠目测，新增一个页面就复制一串旧样式再稍微改一点。

Tailwind 让这些差异更容易被看见，但如果只是把长 CSS 搬成长 class，问题并不会消失。

先统一变量，再统一组件

项目使用 Tailwind v4，颜色等基础值可以在 CSS 里集中定义。实际变量会随着主题变化，下面只是一个简化结构：

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

有了变量以后，下一步不是给所有元素套上同一张“毛玻璃卡片”，而是区分内容卡片、操作面板和纯布局容器。它们可以共享边框和圆角，但不一定都需要模糊、阴影和 hover 位移。

重复的 class 组合如果表达同一种界面含义，我会把它留在 PostCard、按钮或空状态组件里。只是偶然长得相似的区域，不急着抽成一个带十几个参数的万能组件。

sm:、md:、lg: 写起来很方便，也容易让我只盯着断点。真正需要测试的是断点之间：标题变成两行时会不会挤按钮，侧栏出现后正文是否仍有合理宽度，触控区域是否足够大。

我通常先保证移动端单列能完整阅读，再给宽屏增加侧栏或辅助信息。桌面布局里存在的内容，不能在移动端只是简单隐藏而失去唯一入口。

迁移以后，globals.css 并不会自动变小。主题变量、文章排版、动画和少量工具类都可能继续堆进去。如果每次遇到特殊情况都加一个全局选择器，最终还是会回到最初的问题。

全局 * { transition: ... } 就是一个典型反例。它会让尺寸、位置甚至首屏渲染都带上不必要的过渡。现在只在按钮、链接和确实需要反馈的组件上添加颜色或变换动画，并尊重系统的减少动态效果设置。

Tailwind 可以帮助控制样式，却不能自动避免布局偏移。图片没有固定比例、服务端占位和真实内容高度不同，页面照样会在加载时跳动。样式重构完成后，仍然需要在真实网络和不同屏幕下观察首屏，而不是只看开发环境里已经缓存好的页面。

这次迁移最大的收获不是少写了多少 CSS，而是把一部分视觉规则变成了可复用约束。剩下的工作依然是删掉没有必要的效果，让正文比装饰更清楚。

项目使用 Tailwind v4，颜色等基础值可以在 CSS 里集中定义。实际变量会随着主题变化，下面只是一个简化结构：

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

我通常先保证移动端单列能完整阅读，再给宽屏增加侧栏或辅助信息。桌面布局里存在的内容，不能在移动端只是简单隐藏而失去唯一入口。

这次迁移最大的收获不是少写了多少 CSS，而是把一部分视觉规则变成了可复用约束。剩下的工作依然是删掉没有必要的效果，让正文比装饰更清楚。