Tailwind CSS 4 在本站的使用心得

本站 UI 基于 Tailwind CSS 4，整理几个高频用法。

v4 变化

• 配置迁移到 CSS（@import "tailwindcss"）
• 和 PostCSS 集成更直接
• 性能更好，开发体验顺滑

本站常用模式

玻璃拟态卡片

border border-white/10 bg-white/5 backdrop-blur-md

暗色背景下层次感很好。

渐变文字

配合 bg-clip-text text-transparent 和 bg-gradient-to-r。

响应式间距

移动端 px-6，大屏 max-w-5xl mx-auto — 全站统一容器宽度。

和 Framer Motion 配合

动画交给 Motion，样式交给 Tailwind，职责清晰：

• initial / whileInView 做入场
• Tailwind 做 hover、transition

建议

1. 重复三次以上的样式再抽组件，别过早抽象
2. 暗色模式用 dark: 前缀，配合 next-themes
3. 分类色用 config 统一管理（如 categories.ts 里的 badgeClass）

Tailwind 对个人站点的价值：改样式快、一致性容易保持。