按理说，

为什么要引入 TailwindCSS？不过，

常见痛点：

• 传统 CSS 随项目规模增长而膨胀。维护成本飙升，
• 重复造轮子、类名冲突导致样式难以统一管理。
• 设计稿与代码实现之间的落差大，迭代效率低下。

TailwindCSS 的主要优势正好针对以上痛点：

• 只在需要的地方生成原子类，避免无用 CSS 代码堆积。
• 通过工具类快速搭建页面省去手写重复样式的时间。
• 统一的设计程序让团队成员不再为命名纠结，提高协作效率。说起来，

至于准备工作。需要添加的文件

• vite.config.js
• tailwind.config.js
• style.css

完整集成步骤

1. 创建 uni-app 项目并初始化依赖

1. 使用 HBuilderX 新建一个 uni-app 项目。
2. 打开终端，执行 pnpm init -y 初始化项目。老实说，
3. 安装 Tailwind 相关依赖：

pnpm i -D @tailwindcss/postcss @tailwindcss/vite tailwindcss weapp-tailwindcss autoprefixer

2. 配置 Vite

import { defineConfig } from 'vite';import uni from '@dcloudio/vite-plugin-uni';import path from 'path';import autoprefixer from 'autoprefixer';import tailwindcss from '@tailwindcss/postcss';话说回来，import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite';const isH5 = process.env.UNI_PLATFORM === 'h5';
怎么说呢，const isApp = process.env.UNI_PLATFORM === 'app';const WeappTailwindcssDisabled = isH5 || isApp;const resolve = => path.resolve;export default defineConfig({
plugins:,}),],css: {
postcss: {
plugins:,},},resolve: {
从alias来看。{
至于'@'，resolve,},},// 开发服务器，仅对 H5 生效
至于server，{
从port来看，8080,host: '0.0.0.0',},});

3. 配置 Tailwind

/** @type {import.Config} */
module.exports = {
// 指定扫描文件。解决“未找到类”的报错——常见痛点之一
content:,// 禁用 Tailwind 自带的全局样式重置，防止和 uni-app 默认 reset 冲突
corePlugins: {
preflight: false,},me: {
从extend来看，{},},plugins:,};按理说，

4. 创建全局样式入口

@import "tailwindcss";

注意：如果你在页面中使用了 等标签，请确保对应的 Tailwind 类已在 content

快速定位 Tailwind 类 – 常用查询工具推荐