uni-app cli vue2 webpack

警告

这条 uni-app cli vue2 webpack 路线已经不推荐，仓库中的对应 classic demo 也已经移除。

请优先使用 uni-app cli vue3 vite。

安装

npm

npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

Yarn

yarn add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

pnpm

pnpm add -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

Bun

bun add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

package.json

 "scripts": {
   "postinstall": "weapp-tw patch"
 }

使用 pnpm@10+

pnpm@10 默认只允许 onlyBuiltDependencies 中的包运行生命周期脚本。安装完本插件后，请执行 pnpm approve-builds weapp-tailwindcss 将其加入白名单，避免 postinstall 的 weapp-tw patch 被跳过。

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色

如需在补丁前强制刷新 tailwindcss-patch 的缓存，可改为：

package.json

 "scripts": {
   "postinstall": "weapp-tw patch --clear-cache"
 }

默认不清理缓存；只有当你怀疑缓存导致补丁未生效或目标不一致时，才需要添加 --clear-cache。***

配置

创建 vue.config.js

vue.config.js

const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
const path = require('node:path')
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  // some option...
  configureWebpack: (config) => {
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        rem2rpx: true,
        cssEntries: [
          // 你 @import "weapp-tailwindcss/index.css"; 那个文件绝对路径
          path.resolve(__dirname, './src/app.css'),
        ],
      })
    )
  }
  // other option...
}

module.exports = config

tailwindcss@4 必须配置 cssEntries 并且使用绝对路径，否则 tailwindcss 生成的类名不会参与转译。

配置 postcss.config.js

postcss.config.js

const path = require('path')
const webpack = require('webpack')
const config = {
  parser: require('postcss-comment'),
  plugins: [
    require('@tailwindcss/postcss')(), // 只添加这一行
    require('postcss-import')({
      resolve (id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),

    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}
if (webpack.version[0] > 4) {
  delete config.parser
}
module.exports = config

添加样式

在 src/app.css 中引入 weapp-tailwindcss/index.css，这个文件会作为 cssEntries 的入口：

src/app.css

@import "weapp-tailwindcss/index.css";

关于 @import 'tailwindcss'

默认情况下，weapp-tailwindcss 的 rewriteCssImports 选项会自动将@import 'tailwindcss' 改写为 @import 'weapp-tailwindcss/index.css'。

这意味着你可以继续在 IntelliSense 辅助入口中使用官方文档的写法 @import 'tailwindcss'，以获得更好的 IDE 智能提示 支持。

如果是实际运行时入口，推荐直接写 @import 'weapp-tailwindcss/index.css'。

如果遇到报错或样式不生效，也请优先手动改为 @import 'weapp-tailwindcss/index.css'， 或将rewriteCssImports 设置为false。

为了解决 IDE 智能提示问题，需要在 VS Code 里显式告诉 Tailwind CSS IntelliSense 哪个文件是 Tailwind 4 的 CSS 入口。最直接的做法是把它指向真实生效的 src/app.css：

.vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "src/app.css"
}

如果你更想单独放一个“只给编辑器识别”的文件，也可以额外创建 src/main.css：

src/main.css

@import "tailwindcss";
@source not "dist";

然后把 experimental.configFile 指向它：

.vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "src/main.css"
}

这个 src/main.css 只用于 IntelliSense，不要在 App.vue 里实际引入。应用运行时仍然使用 src/app.css 里的 @import "weapp-tailwindcss/index.css"。

这里要写 @import "tailwindcss"，因为 tailwindcss-intellisense 当前用于触发 v4 设计系统加载的判断只认 @import "tailwindcss" 或 @theme {}，并不认 @import "weapp-tailwindcss/index.css"。

注意

千万不要在 uni.scss 中去引入 tailwindcss, uni.scss 本质上走的是 scss.additionalData, 它会在每一个 scss 文件的开头，都去添加 uni.scss 里的文件内容

所以这相当于你每个 scss/ vue 文件里面，都加了 tailwindcss 引入，那 css 体积就爆炸了

然后直接运行到小程序，微信开发者工具导入这个项目，即可看到效果

说明

本文仅为存量项目迁移和排查保留，不再提供推荐模板。