Tailwind CSS v4: Zero-config + CSS-native Variables

Tailwind CSS v4 is the late-2024 architectural rewrite - its biggest shift is "going back to CSS itself". Everything previously in tailwind.config.js is now expressed via native CSS @theme blocks and CSS variables, and the new oxc engine delivers 10-40x speedup over v3.

Zero-config & @theme Design Tokens

Delete tailwind.config.js entirely. Entry CSS needs only one line: @import "tailwindcss". All theme tokens (colors, font stacks, shadows, spacing, animations) live inside the same CSS file in @theme block using real CSS custom-property syntax. Works with Next.js/Vite with no postcss.config - onboarding friction cut in half.

/** @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>
  );
}

Bundled oxc Engine, Container Queries, @layer utilities

New Rust-based oxc compiler cuts 10k-file project build from 8s to 300ms. @media queries, @container queries, @property, color-mix are first-class citizens - no plugins required. @layer utilities defines project-specific utility classes that join official utilities in JIT sorting and purge.

Best Practices

Keep v3 JIT naming habits but migrate configs to @theme. For legacy projects run npx @tailwindcss/upgrade one-shot migration. Don't stack @apply beyond 5 utilities; for complex compositions write native CSS pulling tokens via theme() function.