Next.js 15 + Tailwind 4 搭站手记

这座站点的底子是 Next.js 15 App Router + Tailwind 4。模板能省下的时间有限，主题还是要自己调——尤其是想做出「纸」的质感时。

语义化颜色

与其到处写 text-gray-800，不如先定义一套语义变量：paper 是纸、ink 是墨、leaf 是墨绿。切暗色模式时只改一处变量，全站生效。

@theme inline {
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-leaf: var(--leaf);
}

.dark {
  --paper: #141815;
  --ink: #e5e2d7;
  --leaf: #8cc2a3;
}

纸质纹理

一段内联 SVG 的 feTurbulence 噪声，透明度压到 4%，fixed 铺满全屏、置于最上层——肉眼看是纸的纤维感，实际代价几乎为零。

剩下的就是克制：留白、衬线标题、一点点旋转的碎片卡片。装饰越少，质感越贵。

碎片的轻微旋转和生长阶段徽章，是在数字花园页面里实现的，感兴趣可以去看看。