环境搭建与配置

✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes  # 这里选 Yes，脚手架会自动配置
✔ Would you like your code inside a `src/` directory? Yes
✔ Would you like to use App Router? Yes
✔ Would you like to use Turbopack for next dev? Yes
✔ Would you like to customize the import alias? No

/* v3 的写法（已过时）*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'tailwindcss';

/* 扫描 src 目录下的所有组件 */
@source "../**/*.{js,ts,jsx,tsx,mdx}";

/* 如果有 components 目录在根目录 */
@source "../../components/**/*.{js,ts,jsx,tsx}";

<div class="bg-brand-500 text-brand-50 font-display rounded-4xl shadow-soft">
  使用自定义设计令牌
</div>

Tailwind CSS IntelliSense

{
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": ["prettier-plugin-tailwindcss"]
}

<div
  class="p-4 flex bg-white items-center shadow-lg rounded-xl justify-between"
></div>

<div
  class="flex items-center justify-between rounded-xl bg-white p-4 shadow-lg"
></div>

Settings → Languages & Frameworks → Style Sheets → Tailwind CSS

// 条件类名 + 类名覆盖
<div
  className={cn(
    'p-4 bg-white rounded-lg',
    isActive && 'bg-blue-500 text-white',
    className // 允许外部覆盖
  )}
/>

import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-blue-500 text-white hover:bg-blue-600',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-lg',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
)

interface ButtonProps extends VariantProps<typeof buttonVariants> {
  children: React.ReactNode
}

function Button({ variant, size, children }: ButtonProps) {
  return (
    <button className={buttonVariants({ variant, size })}>{children}</button>
  )
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

my-tailwind-app/
├── src/
│   ├── app/
│   │   ├── globals.css      # Tailwind 入口 + 主题配置
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   │   └── ui/
│   │       └── button.tsx
│   └── lib/
│       └── utils.ts          # cn 函数等工具
├── .vscode/
│   └── settings.json         # VS Code 配置
├── postcss.config.mjs        # PostCSS 配置
├── .prettierrc               # Prettier 配置
├── tailwind.config.ts        # 可选：传统配置文件
├── tsconfig.json
└── package.json

/* v3 写法（已过时）*/
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

/* v4 写法 */
@utility content-auto {
  content-visibility: auto;
}

/* 定义功能性工具类 */
@utility tab-* {
  tab-size: --value(--tab-size-*);
}

<!-- 使用 -->
<pre class="tab-4">代码缩进 4 空格</pre>
<pre class="tab-8">代码缩进 8 空格</pre>

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
    "type-check": "tsc --noEmit"
  }
}