Tailwind CSS 4 上手笔记：CSS 优先的新范式

Tailwind 4 把配置从 tailwind.config.js 搬进了 CSS 本身，@theme 指令让设计令牌真正成为 CSS 变量。

#主题即变量

@import "tailwindcss";

@theme {
  --color-neon-400: #22d3ee;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-glow: 0 8px 40px -8px rgb(34 211 238 / 0.35);
}

声明后即可直接使用 text-neon-400、shadow-glow 这些工具类，运行时还能用 var(--color-neon-400) 引用。

#与 Astro 的组合

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default {
  vite: { plugins: [tailwindcss()] },
};

不需要 PostCSS 配置，不需要 content 扫描白名单，Vite 插件搞定一切。

#一些值得注意的迁移点

• @apply 依然可用，但自定义类要先 @utility 注册
• 默认边框颜色从 gray-200 变为 currentColor
• 渐变工具类从 bg-gradient-to-r 改名为 bg-linear-to-r

整体感受：4.0 是一次「减法」升级，心智负担反而更小了。