Tailwind CSS v4 主题定制：薄荷绿与樱花粉

为什么用 @theme

Tailwind CSS v4 不再需要 tailwind.config.js，主题直接在 CSS 中用 @theme 声明。 本博客的主色是薄荷绿（#4ade80），副色是樱花粉（#fbcfe8）：

@theme {
  --color-mint-400: #4ade80;
  --color-sakura-200: #fbcfe8;
}

声明之后会生成对应的工具类，比如 bg-mint-400、text-sakura-300，直接用即可。

语义色与组件类

除了完整色阶，还保留了一组语义变量（--color-primary、--color-accent）， 组件里可以直接用 var(--color-primary) 引用主题色。

常用的两种质感封装成了组件类：

• .glass-card —— 毛玻璃卡片（背景模糊 + 半透明白底）
• .tape-effect —— 黄色半透明胶带贴纸

一个小技巧

未使用的色阶会被 Tailwind 按需剔除，所以可以放心地把整套色板写进 @theme， 最终产物体积不会有明显变化。