第 1 课：Tailwind CSS v4

┌─────────────────────────────────────────────────────────────────┐
│  🎯 核心观点：Tailwind CSS 是 AI 最佳拍档                        │
├─────────────────────────────────────────────────────────────────┤
│  📚 你将学到：                                                   │
│    • 理解传统 CSS 方案在 AI 时代的局限性                         │
│    • 掌握 Utility-first 的核心理念和优势                         │
│    • 学习 Tailwind v4 的重大变化（CSS-first、Oxide引擎）         │
│    • 实践从传统 CSS 迁移到 Tailwind 的策略                       │
│    • 掌握 AI 辅助 Tailwind 开发的技巧                            │
└─────────────────────────────────────────────────────────────────┘

UserCard/
├── UserCard.jsx    (JSX文件)
└── UserCard.css    (CSS文件)

import './UserCard.css'

export function UserCard({ user, onEdit }) {
  return (
    <div className="user-card">
      <img className="user-card__avatar" src={user.avatar} alt={user.name} />
      <div className="user-card__info">
        <h3 className="user-card__name">{user.name}</h3>
        <p className="user-card__email">{user.email}</p>
      </div>
      <button className="user-card__edit-btn" onClick={onEdit}>编辑</button>
    </div>
  )
}

.user-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.user-card__avatar { width: 48px; height: 48px; border-radius: 50%; }
.user-card__info { flex: 1; }
.user-card__name { font-weight: 600; font-size: 18px; }
.user-card__email { font-size: 14px; color: #666; }
.user-card__edit-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

UserCard/
├── UserCard.jsx         (JSX文件)
└── UserCard.module.css  (CSS Module文件)

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

export function UserCard({ user, onEdit }) {
  return (
    <div className={styles.card}>
      <img className={styles.avatar} src={user.avatar} alt={user.name} />
      <div className={styles.info}>
        <h3 className={styles.name}>{user.name}</h3>
        <p className={styles.email}>{user.email}</p>
      </div>
      <button className={styles.editBtn} onClick={onEdit}>编辑</button>
    </div>
  )
}

UserCard/
└── UserCard.jsx  (单文件)

import { Button } from '@/components/ui/button'
import { Avatar, AvatarImage } from '@/components/ui/avatar'

export function UserCard({ user, onEdit }) {
  return (
    <div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow-sm">
      <Avatar>
        <AvatarImage src={user.avatar} alt={user.name} />
      </Avatar>
      <div className="flex-1">
        <h3 className="font-semibold text-lg">{user.name}</h3>
        <p className="text-sm text-gray-600">{user.email}</p>
      </div>
      <Button variant="outline" size="sm" onClick={onEdit}>
        编辑
      </Button>
    </div>
  )
}

const Card = styled.div`
  display: flex;
  padding: 16px;
  background: ${props => props.theme.colors.white};
  border-radius: ${props => props.theme.radii.lg};
`

// 文件 1: Card.jsx
<div className={styles.container}>
  <h2 className={styles.title}>标题</h2>
</div>

/* 文件 2: Card.module.css */
.container { max-width: 640px; margin: 0 auto; padding: 24px; }
.title { font-size: 24px; font-weight: 700; color: #111; }

<div className="max-w-2xl mx-auto p-6">
  <h2 className="text-2xl font-bold text-gray-900">标题</h2>
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
  plugins: [require('@tailwindcss/forms')],
}

/* app.css */
@import "tailwindcss";

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

@plugin "@tailwindcss/forms";

<!-- v4.2 新增的颜色 -->
<div className="bg-rose-500">Rose</div>
<div className="bg-fuchsia-500">Fuchsia</div>

<!-- 基于容器宽度的响应式 -->
<div className="@container">
  <div className="@lg:flex @lg:gap-4">
    <!-- 当容器宽度 >= lg 时，变成 flex 布局 -->
  </div>
</div>

<!-- 直接使用 CSS 变量 -->
<div className="bg-[var(--brand-color)]">
  自定义颜色
</div>

pnpm add tailwindcss@latest postcss autoprefixer

/* app.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
}

// ✅ 新组件：用 Tailwind
export function NewFeature() {
  return (
    <div className="flex items-center gap-4 p-4 bg-white rounded-lg">
      新功能
    </div>
  )
}

// ⏳ 老组件：暂时保持不变
export function OldFeature() {
  return (
    <div className={styles.container}>
      老功能
    </div>
  )
}

<div className={cn(
  "flex items-center gap-4",      // 布局
  "p-4 bg-white rounded-lg",      // 容器
  "shadow-sm hover:shadow-md",    // 阴影
  "transition-shadow duration-200" // 动画
)}>

/* 复杂样式可以用 @apply */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600;
}

创建一个定价卡片组件，包含：
- 套餐名称
- 价格（月/年切换）
- 功能列表（带勾选图标）
- CTA 按钮
使用 Tailwind CSS 和 shadcn/ui

把这个卡片改成暗色主题，添加 hover 动画效果