byted-util-vite-react-tailwind

Files (3)

• LICENSE
• SKILL.md
• _meta.json

SKILL.md (first lines)

# Vite + React + TailwindCSS v4 开发技能

> 基于 Vite + React + TailwindCSS v4 + lucide-react 技术栈的前端项目搭建和开发指南。

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vite | ^5.x 或 ^6.x | 构建工具、开发服务器 |
| React | ^18.x 或 ^19.x | UI 框架 |
| TailwindCSS | ^4.x | 原子化 CSS 框架（Vite 插件模式） |
| @tailwindcss/vite | ^4.x | TailwindCSS Vite 插件 |
| lucide-react | latest | 图标库 |
| TypeScript | ^5.x 或 ^6.x | 类型安全 |

## 项目初始化

### Step 1: 创建 Vite + React 项目

```bash
# 创建项目（使用 React + TypeScript 模板）
npm create vite@latest . -- --template react-ts

# 安装依赖
npm install
```

### Step 2: 安装 TailwindCSS v4

```bash
# 安装 TailwindCSS v4 及 Vite 插件
npm install tailwindcss @tailwindcss/vite
```

> **注意：** v4 不再需要 `postcss`、`autoprefixer`，也不需要运行 `npx tailwindcss init`。

### Step 3: 配置 Vite 插件

在 `vite.config.ts` 中添加 `@tailwindcss/vite` 插件：

**vite.config.ts:**
```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})
```

### Step 4: 清空默认样式并配置 CSS（⚠️ 强制关键步骤）

**必须将 `src/index.css` 和 `src/App.css` 的全部内容清空**，然后在 `src/index.css` 中只写 TailwindCSS 引入（和可选的 `@theme`）：

**src/index.css:**
```css
@import "tailwindcss";
```

**src/App.css:**
```css
/* 清空此文件所有内容，或直接删除此文件 */
```

> **🚨 严格禁止：** 不要在 `index.css` 中写任何 `*`、`body`、`html` 等全局选择器样式！包括但不限于：
> ```css
> /* ❌ 以下全部禁止 */
> * { margin: 0; padding: 0; box-sizing: border-box; }
> body { font-family: ...; -webkit-font-smoothing: antialiased; }
> html { scroll-behavior: smooth; }
> ```
> 这些全局 reset 样式会覆盖 TailwindCSS 的 preflight（内置 reset），导致间距、字体、布局等样式全部异常。TailwindCSS v4 已经内置了完善的 CSS Reset，**不需要也不允许额外添加全局 reset**。
>
> **正确的 `index.css` 只包含**：`@import "tailwindcss"` + 可选的 `@theme` 自定义主题变量。除此之外不写任何 CSS 规则。

> **v4 使用 `@import "tailwindcss"` 替代 v3 的 `@tailwind base; @tailwind components; @tailwind utilities;`。不再需要 `tailwind.config.js` 配置文件。**

### Step 5: 安装 lucide-react 图标库

```bash
npm install lucide-react
```

### Step 6: 安装工具库（如需 cn 工具函数）

```bash
# 用于合并 className 的工具库
npm install clsx tailwind-merge
```

工具函数 `src/utils/cn.ts`：
```typescript
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

### Step 7: 启动开发服务器

```bash
npm run dev
```

## TypeScript 配置（重要）

### tsconfig.app.json 关键配置

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",

From bytedance/agentkit-samples, Apache-2.0.

More from bytedance/agentkit-samples