第 1 课：Tailwind CSS v4

为什么 Utility-first CSS 是 AI 最佳拍档

BEM vs Tailwind 对比

BEM 方式

需要单独的 CSS 文件，AI 难以跨文件推理

// UserCard.jsx
import styles from './UserCard.module.css'

<div className={styles['user-card']}>
  <img className={styles['user-card__avatar']} />
  <div className={styles['user-card__info']}>
    <h3 className={styles['user-card__name']}>{name}</h3>
    <p className={styles['user-card__email']}>{email}</p>
  </div>
</div>

// UserCard.module.css (另一个文件)
.user-card { display: flex; padding: 16px; }
.user-card__avatar { width: 48px; height: 48px; }
.user-card__name { font-weight: 600; }
.user-card__email { color: #666; font-size: 14px; }

2 个文件，40+ 行代码

Tailwind 方式

样式内联，AI 一眼看懂，单文件完成

AI-Native 开发者

dev@ai-native.com

<div className="flex items-center gap-4 p-4
     bg-white rounded-lg shadow-sm border">
  <Avatar className="w-12 h-12" />
  <div className="flex-1">
    <h3 className="font-semibold">{name}</h3>
    <p className="text-sm text-muted-foreground">{email}</p>
  </div>
  <Button variant="outline" size="sm">编辑</Button>
</div>

1 个文件，10 行代码

Tailwind v4 核心变化

Tailwind v4 新特性

CSS-first 配置

/* globals.css */
@import 'tailwindcss';

@theme {
  --color-brand: #3b82f6;
  --spacing-18: 4.5rem;
}

@plugin "@tailwindcss/forms";

v3 配置（对比）

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
    },
  },
}

容器查询

区域 A（容器宽度 >= lg 时横排）

区域 B

cn() 条件类名

使用 cn() 函数优雅地组合条件类名：

default

active

disabled

import { cn } from '@/lib/utils'

<div className={cn(
  "rounded-lg border px-4 py-2",
  isActive && "border-primary bg-primary",
  isDisabled && "opacity-50 cursor-not-allowed"
)}>
  {label}
</div>