VITE(使用REACT)+TAILWINDCSS+SHADCN基础环境设定_shadcn ui +tailwindcss web搭建-CSDN博客

本文链接：https://blog.csdn.net/m0_55316234/article/details/145564522

React + TypeScript + Tailwind + shadcn/ui 项目配置指南

前言

本指南将帮助你搭建一个基于 Vite 的 React 项目，包含 TypeScript、Tailwind CSS 和 shadcn/ui 组件库的完整配置过程。

1. 配置 NPM 仓库

确保能够成功获取远程库：

# 设置 NPM 镜像
npm config set registry https://registry.npmmirror.com/

# 验证设置
npm config get registry

2. 创建 Vite 项目

npm create vite@latest . -- --template react-ts

3. 安装基础依赖

npm install

4. Tailwind CSS 配置

4.1 tailwind.config.js

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

4.2 src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

4.3 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    
    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4.4 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

5. 安装并初始化 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

6. 初始化 shadcn/ui

npx shadcn-ui@latest init

7. 安装 shadcn/ui 组件

# 正确的安装命令
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card

# 或者简写形式
npx shadcn add button
npx shadcn add card

# ❌ 错误示例
# npx shadcn-ui@latest add button

8. 配置 App.tsx

import { Button } from "./components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./components/ui/card"

function App() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-8 text-center">
          Welcome to Vite + React + Tailwind + shadcn/ui
        </h1>
        <div className="grid gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Project Setup Complete! 🎉</CardTitle>
              <CardDescription>
                Your project is now configured with TypeScript, Tailwind CSS, and shadcn/ui
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex gap-4">
                <Button>Primary Button</Button>
                <Button variant="secondary">Secondary Button</Button>
                <Button variant="outline">Outline Button</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

export default App

9. 启动开发服务器

npm run dev

# ❌ 错误命令
# npm start

常见问题

Q1: 为什么要设置 NPM 镜像？

设置 NPM 镜像可以加快依赖包的下载速度，特别是在中国大陆地区。使用 npmmirror 镜像可以显著提升安装效率。

Q2: 如何确认 shadcn/ui 安装成功？

安装完成后，你可以在 components/ui 目录下看到相应的组件文件。此外，你可以通过运行开发服务器并查看示例页面来验证组件是否正常工作。

Q3: 使用 Path Aliases 的好处是什么？

Path Aliases（路径别名）可以简化导入语句，使代码更加清晰。使用 @/* 别名可以避免复杂的相对路径，例如 ../../../components 这样的导入方式。

注意事项

确保所有配置文件都放在正确的目录位置
安装组件时使用正确的命令格式
检查 TypeScript 配置是否正确，特别是路径别名设置
在启动开发服务器前确保所有依赖都已正确安装