Vite 框架中安装

安装和配置 Vite。

更新： 我们在 canary 版本中已添加对 React 19 和 Tailwind v4 的完整支持。有关更多信息，请参见 Tailwind v4 文档。

创建项目

首先，使用 vite 创建一个新的 React 项目：

pnpm npmyarn bun

pnpm create vite@latest

添加 Tailwind 及其配置

安装 tailwindcss 及其同行依赖项，然后生成 tailwind.config.js 和 postcss.config.js 文件：

pnpm npmyarn bun

pnpm add -D tailwindcss postcss autoprefixer

pnpm npmyarn bun

pnpm dlx tailwindcss init -p

在你的主 CSS 文件中（我们这里是 src/index.css），添加以下导入：

@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */

在 tailwind.config.js 中配置 tailwind 的模板路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

编辑 tsconfig.json 文件

当前版本的 Vite 将 TypeScript 配置分为三个文件，其中两个需要编辑。将 baseUrl 和 paths 属性添加到 tsconfig.json 和 tsconfig.app.json 文件的 compilerOptions 部分：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

编辑 tsconfig.app.json 文件

将以下代码添加到 tsconfig.app.json 文件，以便你的 IDE 能解析路径：

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

更新 vite.config.ts

将以下代码添加到 vite.config.ts，以便你的应用程序能够正确解析路径：

pnpm npmyarn bun

pnpm add -D @types/node

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

运行 CLI

运行 shadcn-ui 的初始化命令来设置你的项目：

pnpm npmyarn bun

pnpm dlx shadcn@latest init

配置 components.json

系统会询问你几个问题来配置 components.json：

你想使用什么样的样式？ › New York
你希望使用什么颜色作为基础颜色？ › Zinc
你是否要使用 CSS 变量来管理颜色？ › no / yes

就这些

现在，你可以开始将组件添加到你的项目中。

pnpm npmyarn bun

pnpm dlx shadcn@latest add button

上面的命令会将 Button 组件添加到你的项目中。然后，你可以像这样导入它：

import { Button } from "@/components/ui/button"
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}