tailwind4-expert

🎨 技能：tailwind4-expert

描述

Tailwind CSS 4.0+ 资深专家，专注于高性能的“Oxide”引擎和 CSS 优先配置。此技能指导你舍弃 JavaScript 密集型构建步骤，改用原生 CSS 变量和闪电般快速的编译。

核心优先事项

1. CSS 优先配置：将所有令牌移至 @theme，弃用 tailwind.config.js。
2. 性能优化：利用基于 Rust 的引擎，实现低于 10 毫秒的增量构建。
3. 现代 CSS 特性：无需插件即可使用原生容器查询、3D 变换和 @utility。
4. 设计系统完整性：通过 CSS 变量强制执行严格的令牌工作流。

🚀 Tailwind 4.0 的 5 大优势

1. 零 JS 配置：配置就是 CSS。无需再在 JS 和 CSS 文件之间切换上下文。
2. 内置容器查询：原生支持 @container 和 @md:grid-cols-2 等变体。
3. 动态工具类：自动生成 grid-cols-(--my-grid-count) 等复杂工具类。
4. 原生 3D 变换：rotate-x-45 和 perspective-1000 等工具类开箱即用。
5. 默认支持组合：依托全新的 Oxide 引擎逻辑，每个工具类都经过设计，可无冲突地组合使用。

🛠️ 实现示例：现代布局（2026）

结合容器查询、3D 变换和 @theme 变量，打造前沿 UI。

// 1. Define tokens in globals.css
// @theme { --color-neon: #00f0ff; --perspective-deep: 1200px; }

export function ModernCard() {
  return (
    <div className="@container perspective-(--perspective-deep) p-8">
      <div className="
        group relative transform-3d transition-all duration-500
        hover:rotate-y-12 hover:rotate-x-6
        bg-zinc-900 border border-white/10 rounded-2xl
        p-4 @md:p-8 @lg:p-12
      ">
        <div className="text-zinc-400 @md:text-lg @lg:text-2xl font-medium">
          Responsive to Parent
        </div>
        
        <div className="mt-4 h-1 bg-neon shadow-[0_0_15px_var(--color-neon)]" />
        
        <div className="mt-8 grid grid-cols-1 @md:grid-cols-3 gap-4">
          <div className="aspect-square bg-white/5 rounded-lg" />
          <div className="aspect-square bg-white/5 rounded-lg" />
          <div className="aspect-square bg-white/5 rounded-lg" />
        </div>
      </div>
    </div>
  )
}

目录与详细指南

1. 从 v3 迁移到 v4 — 关键

• 自动升级工具（npx @tailwindcss/upgrade）
• 手动迁移：移除 tailwind.config.js
• PostCSS 与 Lightning CSS 集成

2. @theme 块与设计系统 — 关键

• 定义颜色、字体和间距令牌
• 覆盖或扩展默认主题
• 使用 CSS 变量（var(--color-*)）代替 theme()

3. 高级布局与容器查询 — 高

• 原生容器查询变体（@md:、@lg:）
• 使用动态变量配置复杂网格
• 3D 变换与透视

4. 自定义工具类与 @utility — 中

• 新版 @utility 指令语法
• 在自定义类中处理函数式／动态值
• 使用本地主题变量，避免任意值

快速参考：“该做”与“不该做”

不该做	该做
tailwind.config.js	在 CSS 中使用 @theme { ... }
@tailwind base; @tailwind components;	@import "tailwindcss";
theme('colors.brand')	var(--color-brand)
arbitrary-vals-[123px]	在 @theme 或本地 --variable 中定义
npm install @tailwindcss/container-queries	使用原生 @md: 变体
import { ... } from 'tailwind-merge'	信任 Oxide 引擎处理组合

---

针对 Tailwind CSS 4.0+ 和 Lightning CSS 优化。 更新于：2026 年 1 月 22 日 14:59