Tailwind CSS 高级视觉系统拆解

设计目标

技术博客不一定只能是普通白底排版。高级感来自克制的细节：色彩低饱和、空间有呼吸、层次清晰、动效轻量。

主题 token

全局样式集中在 src/styles/global.css。浅色和深色主题都通过 CSS 变量控制，Tailwind 类只消费这些变量。

:root {
  --bg: #f7f3ec;
  --text: #18202b;
  --accent: #9c806f;
}

玻璃拟态

glass 工具类统一控制边框、背景透明度、内高光、阴影和模糊，避免每个组件重复堆样式。

动效边界

动效只用于 hover、页面入场和主题切换反馈，不做高成本动画。用户开启减少动态效果时，CSS 会自动降低动画时长。