Tailwind CSS v4 新特性：Zero-config + CSS-native 变量

Tailwind CSS v4 是 2024 年底发布的架构级重写，最大变化是"回归 CSS 本身"：以前 tailwind.config.js 的所有能力现在都能用原生 CSS 的 @theme 和 CSS 变量实现，配合 oxc 引擎比 v3 快 10-40 倍。

零配置与 @theme 设计令牌

彻底删除 tailwind.config.js。入口文件只需要一行 @import "tailwindcss"；所有主题令牌（颜色、字体、阴影、间距、动画）在同个 CSS 文件用 @theme 块声明，和 CSS 自定义属性语法完全一致。Next.js/Vite 无需 postcss.config 即可生效，新手上手门槛降低 50%。

/** @type {import('tailwindcss').Config} 以前 tailwind.config.js 写法现在不要了 **/
/* ====== app.css v4 新写法：零配置 @theme 块 ====== */
@import "tailwindcss";

@theme {
  --color-brand-50: #effaf5;
  --color-brand-100: #d9f2e5;
  --color-brand-500: #11a97a;
  --color-brand-600: #0e8a63;
  --color-surface: #0b0d12;
  --color-muted: color-mix(in oklab, var(--color-surface), white 65%);

  --font-sans: "Inter", "PingFang SC", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.25);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-brand-500), transparent 70%),
                 0 0 32px -8px color-mix(in oklab, var(--color-brand-500), transparent 40%);

  --spacing-18: 4.5rem;
  --spacing-88: 22rem;
  --spacing-128: 32rem;

  --animate-float: float 6s ease-in-out infinite;
  --animate-shimmer: shimmer 2s linear infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@layer utilities {
  .text-balance { text-wrap: balance; }
  .bg-grid {
    background-image: linear-gradient(currentColor 1px, transparent 1px),
                      linear-gradient(90deg, currentColor 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .mask-fade-b {
    mask-image: linear-gradient(to bottom, black 60%, transparent);
  }
}

/* 媒体查询 & 容器查询 v4 原生支持 */
@container card (min-width: 420px) {
  .card-title { font-size: 1.5rem; }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* ====== 业务组件中使用 ====== */
.card {
  @apply bg-white dark:bg-zinc-900/60 backdrop-blur-md rounded-2xl shadow-card p-8 transition-all duration-300;
}
.card:hover {
  @apply shadow-glow -translate-y-1;
}

/* ====== nextjs app router 入口 ====== */
// app/globals.css 首行导入即可，不需要 tailwind.config.js
// tailwindcss v4 依赖：npm i tailwindcss @tailwindcss/next
// next.config.mjs:
import createMDX from "@next/mdx";
import tailwindcss from "@tailwindcss/next";

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: { optimizePackageImports: ["shiki", "@shikijs/rehype"] },
};

export default tailwindcss(createMDX()(nextConfig));

// React 组件里直接用新的工具类
export function PricingCard({ tier }: { tier: "pro" | "enterprise" }) {
  const highlight = tier === "enterprise" ? "ring-2 ring-brand-500/40" : "";
  return (
    <article className={`card ${highlight} @lg:flex-row`}>
      <h3 className="card-title text-2xl font-semibold tracking-tight text-balance">
        {tier === "enterprise" ? (
          <span className="bg-gradient-to-r from-brand-500 to-brand-300 bg-clip-text text-transparent">
            Enterprise
          </span>
        ) : "Pro Plan"}
      </h3>
      <div className="mt-6 space-y-4 text-sm text-zinc-600 dark:text-zinc-300">
        <Feature text="SSO SAML / SCIM provisioning" />
        <Feature text="99.99% uptime SLA" />
        <Feature text="Dedicated CSM" />
      </div>
    </article>
  );
}

内置 oxc 引擎 & 容器查询 & @layer utilities

新编译器 oxc 用 Rust 写，10k 文件项目构建从 8s 降到 300ms。@media 媒体查询、@container 容器查询、@property、color-mix 都是一等公民支持，无需插件。@layer utilities 定义项目专属工具类，和官方工具类一起参与 JIT 排序与 purge。

最佳实践

沿用 v3 的 JIT 命名习惯但迁移配置到 @theme。旧项目用官方升级工具 npx @tailwindcss/upgrade 一键迁移。不要混用 @apply 超过 5 个类，复杂样式直接写原生 CSS 配合 theme() 函数取值。