uniapp引入tailwindcss4.x

心中无石马2026-04-30 18:24

为什么要引入tailwindcss？

tailwindcss的核心优势：

CSS不会随着项目增长而膨胀，不需要重复造轮子
可以快速迭代项目，尤其对于个人开发者，能够有效提高生产力
提供统一的设计标准，无需为类的命名烦恼

需要准备添加的文件

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

步骤

用hbuildx新建一个uniapp项目。
使用pnpm进行初始化

cmd 复制代码

> pnpm init

添加相关依赖

cmd 复制代码

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

项目根目录添加vite.config.js文件

javascript 复制代码

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 = (p) => {
    return path.resolve(__dirname, p);
};

export default defineConfig({
    plugins: [
        uni(),
        uvwt({
            rem2rpx: true,
            disabled: WeappTailwindcssDisabled,
            // 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
            tailwindcssBasedir: __dirname,
            cssEntries: [
                resolve('./style.css'),
            ]
        })
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss({
                    base: resolve('./'),
                    optimize: true
                }),
                autoprefixer({}),
            ]
        }
    },
    // 路径别名
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    // 开发服务器（H5 有效）
    server: {
        port: 3000,
        host: '0.0.0.0',
    }
});

项目根目录添加tailwind.config.js文件

javascript 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./pages/**/*.vue", './App.vue'],
  // 2. 核心：禁用全局样式重置（uni-app 自带重置）
  corePlugins: {
    preflight: false
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

css 复制代码

@import "tailwindcss";

tailwindcss快查工具

梦叶的Tailwind - Tailwind CSS 速查表

支持tailwindcss 3.x和tailwindcss 4.x查询，尤其适合初学者。