Tailwind v4 下的像素级视觉还原

像素级还原不是把所有值写死，而是知道哪些值必须稳定。

从色值、网格、滚动节奏和响应式断点四个层面复盘一次视觉还原。Tailwind 负责大部分布局约束，自定义 CSS 只保留背景网格、像素渲染、字体气质和关键动画，避免把样式写成失控的泥潭。

如果要确认 v4 的变量和主题写法，优先看 Tailwind CSS 文档，别从旧配置习惯里硬迁。

色值：CSS 变量 + Tailwind 引用

设计稿给了品牌色，不要直接硬编码到 Tailwind 的 theme.extend.colors 里。用 CSS 变量做中间层：

:root {
  --brand-blue: #0044cc;
  --brand-yellow: #fde047;
  --brand-cream: #f8fbff;
}

然后在 Tailwind 配置中引用变量值。这样换主题只需要改 CSS 变量，不需要动 JS 配置。

网格：背景网格的 CSS 实现

像素风格站点的背景网格用纯 CSS 实现，不需要图片：

.pixel-grid {
  background-image:
    linear-gradient(rgba(0, 68, 204, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 68, 204, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

关键参数：

• 1px 线宽——像素风格要的就是精确的 1px 线条
• 24px 格子尺寸——跟设计稿对齐，不能凭感觉
• 0.08 透明度——网格是背景装饰，不能抢内容的风头

滚动节奏：GSAP + CSS 配合

视差效果用 GSAP ScrollTrigger 控制，但只控制触发时机和强度，动画属性全部在 CSS 里定义：

.parallax-soft {
  will-change: transform;
  transition: transform 0.1s linear;
}

gsap.to(element, {
  y: -30,
  ease: "none",
  scrollTrigger: { trigger: element, start: "top bottom", end: "bottom top", scrub: true },
});

为什么不全用 GSAP

GSAP 处理时间轴很强，但以下场景用 CSS 更合适：

• hover/focus 状态——CSS :hover 比 GSAP 事件监听更可靠
• 过渡动画——transition 比 gsap.to 更适合短促的状态切换
• 关键帧动画——CSS @keyframes 声明式写法更清晰

响应式：断点从设计稿来

Tailwind v4 的断点可以自定义。不要用默认的 sm/md/lg，从设计稿的实际断点出发：

@theme {
  --breakpoint-xs: 480px;
  --breakpoint-md: 768px;
  --breakpoint-xl: 1200px;
}

三个断点够了。每多一个断点，测试成本翻一倍。

自定义 CSS 的边界

Tailwind 处理不了的样式才写自定义 CSS。这个项目里只有这几类：

1. 背景网格——background-image 的 linear-gradient 组合
2. 像素装饰——box-shadow 模拟像素边框
3. 字体气质——@font-face 和 font-family 堆栈
4. 滚动动画——will-change 和 transform 性能优化

其他全部交给 Tailwind 工具类。守住这条线，CSS 就不会变成泥潭。

还原验收表

• 用 Shift + Tab 倒序检查焦点状态。
• 保留 正文阅读宽度 上限。
• 新增页面时复用现有视觉变量。