![image](https://developer.qcloudimg.com/http-save/yehe-1209475/d44021efc9a814e0073f8888b73b0605.png)

## 前言

你好，我是喵喵侠，是一名前端开发。

在过去的几年里，我维护过不少基于 Ant Design 或 Element Plus 的中后台项目。它们确实很全，但每当 UI 设计师给出一个稍微“个性化”一点的需求（比如圆角稍微不同、主色调渐变、或者想要一个完全定制的 Select 下拉框），我往往要花费大量时间去覆盖默认样式，甚至被迫写出 `!important` 这种代码。

到了 2026 年的今天，对于有前端经验的开发者来说，性价比最高的选择不再是那些“大包大揽”的组件库，而是 **Vite + Tailwind CSS + shadcn/ui**。这个组合的核心在于：**极致的启动速度**、**原子化的样式控制** 以及  **“代码归你”的组件所有权**。

本文将带你从零搭建一套现代化的中后台脚手架，并解析为什么这套方案能让你开发得更舒服。

## 快速初始化

我们直接从实战开始，搭建一个基于 React 的基础环境（shadcn/ui 的原生生态在 React 最为成熟）。

#### 1. 创建 Vite 项目

使用 Vite 快速生成模板，选择 React + TypeScript。

```bash
pnpm create vite my-admin-app --template react-ts
cd my-admin-app
pnpm install
```

#### 2. 初始化 Tailwind CSS

Tailwind 是这套样式的基石。

```bash
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

配置 `tailwind.config.js`，确保它可以扫描到你的组件文件：

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

并将 Tailwind 指令添加到 `src/index.css`：

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

#### 3. 初始化 shadcn/ui

这是最关键的一步。shadcn/ui 不是一个 npm 包，而是一个 CLI 工具，它会将组件代码直接复制到你的项目中。

```bash
npx shadcn-ui@latest init
```

在交互式终端中，我会这样配置（推荐）：

```plaintext
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes
```

初始化完成后，你会发现项目目录下多了一个 `components/ui` 文件夹，这里就是以后存放所有基础组件的地方。

## 深度定制与工程化

仅有组件是不够的，中后台项目需要完整的工程化配置。我们需要解决路由、状态管理、暗色模式和 Mock 数据。

#### 1. 组件引入与主题定制

不同于 Antd 需要配置 Less 变量，shadcn/ui 的核心是 ​**CSS Variables**​。如果设计师要修改品牌色，你只需要去 `src/index.css`​ 修改 `:root` 下的变量即可，无需重启项目。

引入一个按钮组件：

```bash
npx shadcn-ui@latest add button
```

在页面中使用：

```typescript
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="p-4">
      <Button variant="default">点击我</Button>
      <Button variant="outline" className="ml-2 text-red-500 hover:text-red-600">
        危险操作
      </Button>
    </div>
  )
}
```

注意那个 `className`​，这正是 Tailwind 的魔力。我不需要去查 API 文档看有没有 `danger` 属性，直接写 CSS 类名就能改样式，这种掌控感非常强。

#### 2. 状态管理 (Zustand)

对于中后台，Redux 有点过重。我推荐使用 ​**Zustand**，它极其轻量且对 TypeScript 支持极好。

```bash
pnpm install zustand
```

创建一个全局 User Store：

```typescript
import { create } from 'zustand'

interface UserState {
  userInfo: { name: string; role: string } | null
  setUserInfo: (info: { name: string; role: string }) => void
  logout: () => void
}

export const useUserStore = create<UserState>((set) => ({
  userInfo: null,
  setUserInfo: (info) => set({ userInfo: info }),
  logout: () => set({ userInfo: null }),
}))
```

#### 3. 暗色模式 (Dark Mode)

shadcn/ui 基于 `next-themes` 提供了开箱即用的暗色模式支持。

```bash
pnpm install next-themes
```

在 `App.tsx` 中包裹 Provider：

```typescript
import { ThemeProvider } from "@/components/theme-provider"

function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
      {/* 你的路由组件 */}
    </ThemeProvider>
  )
}
```

#### 4. 数据 Mock (MSW)

为了前后端分离开发，我通常使用 MSW (Mock Service Worker)。它在 Service Worker 层拦截请求，浏览器控制台能看到真实的 Network 记录，比拦截 XHR 的库更真实。

```bash
pnpm install -D msw
npx msw init public/
```

定义一个简单的 handler：

```typescript
// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw'

export const handlers = [
  http.get('/api/user', () => {
    return HttpResponse.json({
      name: 'MiaoMiaoXia',
      role: 'admin',
    })
  }),
]
```

## 维护性对比：VS 传统组件库

在使用了这套组合一年后，我发现它与 Ant Design / Element Plus 有着本质的区别。

#### 1. 样式的可维护性

- **传统组件库**​：当 UI 设计与库的默认样式不一致时，你需要在 `global.css` 里写大量的样式覆盖，日积月累，这些覆盖代码会变成“屎山”，没人敢动。
- **shadcn/ui**​：组件代码就在 `src/components/ui`​ 里。如果设计师要求 Select 组件的下拉箭头换个图标，我直接进去修改 `select.tsx`​ 源码。**我拥有代码，而不是仅仅拥有配置项。**

#### 2. 打包体积

- **传统组件库**：虽然有 Tree Shaking，但大型组件库内部复杂的逻辑（如国际化、复杂的动画计算）依然会被打包进去。
- **shadcn/ui**：你只安装了你用到的组件。如果你没用 DatePicker，项目里就绝对不会有 DatePicker 的相关代码。

## 总结

Vite + Tailwind + shadcn/ui 的组合，本质上是将开发的**控制权**从组件库作者手中拿回到了开发者自己手中。对于 1-3 年经验的前端工程师来说，它不仅能让你快速搭建出高性能、样式高度还原的中后台应用，更重要的是，通过直接拥有和维护组件源码，你能更深入地理解 headless UI（无头组件）的设计模式和 Accessibility（无障碍访问）标准。这不仅仅是换了一个工具，更是开发思维的一次进阶。


在过去的几年里，我维护过不少基于 Ant Design 或 Element Plus 的中后台项目。它们确实很全，但每当 UI 设计师给出一个稍微“个性化”一点的需求（比如圆角稍微不同、主色调渐变、或者想要一个完全定制的 Select 下拉框），我往往要花费大量时间去覆盖默认样式，甚至被迫写出 !important 这种代码。

Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合

前端

"前端开发实战：Vite+TailwindCSS+shadcn/ui打造高效中后台系统。详解从项目初始化到深度定制，包括组件引入、状态管理、暗色模式和数据Mock。对比传统组件库，分析这套组合在样式维护、打包体积上的优势，帮助开发者掌握现代化前端开发模式。"

TypeScript

路由

2026新春采购季

cclid

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合-腾讯云开发者社区-腾讯云

Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合

Vite + Tailwind + shadcn-ui：2026 年最舒服的中后台前端开发组合

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐