Tarquin note
Tarquin note

像素级还原不是把所有值写死,而是知道哪些值必须稳定。
从色值、网格、滚动节奏和响应式断点四个层面复盘一次视觉还原。Tailwind 负责大部分布局约束,自定义 CSS 只保留背景网格、像素渲染、字体气质和关键动画,避免把样式写成失控的泥潭。
如果要确认 v4 的变量和主题写法,优先看 Tailwind CSS 文档,别从旧配置习惯里硬迁。
设计稿给了品牌色,不要直接硬编码到 Tailwind 的 theme.extend.colors 里。用 CSS 变量做中间层:
:root {
--brand-blue: #0044cc;
--brand-yellow: #fde047;
--brand-cream: #f8fbff;
}
然后在 Tailwind 配置中引用变量值。这样换主题只需要改 CSS 变量,不需要动 JS 配置。
Tailwind v4 原生支持 CSS 变量作为颜色值,不再需要 theme.extend.colors 的 JS 配置。直接在 CSS 里定义 @theme 即可。
像素风格站点的背景网格用纯 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 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 处理时间轴很强,但以下场景用 CSS 更合适:
:hover 比 GSAP 事件监听更可靠transition 比 gsap.to 更适合短促的状态切换@keyframes 声明式写法更清晰Tailwind v4 的断点可以自定义。不要用默认的 sm/md/lg,从设计稿的实际断点出发:
@theme {
--breakpoint-xs: 480px;
--breakpoint-md: 768px;
--breakpoint-xl: 1200px;
}
三个断点够了。每多一个断点,测试成本翻一倍。
移动端优先(mobile-first)写法:基础样式适配小屏,md: 覆盖中等屏幕,xl: 覆盖大屏幕。不要反过来写——桌面优先的 CSS 在小屏上会有一堆覆盖。
不要把设计稿里的每个像素都翻译成工具类。能抽成变量的抽变量,不能解释来源的数值先别写进全局。
Tailwind 处理不了的样式才写自定义 CSS。这个项目里只有这几类:
background-image 的 linear-gradient 组合box-shadow 模拟像素边框@font-face 和 font-family 堆栈will-change 和 transform 性能优化其他全部交给 Tailwind 工具类。守住这条线,CSS 就不会变成泥潭。
| 层面 | 检查重点 | 易错做法 |
|---|---|---|
| 色值 | 变量是否统一 | |
| 网格 | 线宽和节奏 | 凭感觉调背景 |
| 响应式 | 断点来源 | 默认断点全套照搬 |