uni-app CLI Vue2 Webpack

警告

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

新项目请直接使用 uni-app cli vue3 vite。

externalClasses 提醒

uni-app 自定义组件如果声明了 externalClasses，请在插件配置的 customAttributes 中列出这些属性。否则像 my-class="bg-[#fafa00] text-[40px]" 这样的写法会被微信开发者工具拆成无效片段，导致样式失效。

详细说明与更多示例请查阅 👉 《组件外部样式类（externalClasses）的支持》。

注意

本文仅作为存量项目归档说明保留，不再作为推荐接入方式。

vue.config.js

const path = require('node:path')
const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  // some option...
  configureWebpack: (config) => {
    config.plugins.push(
      new WeappTailwindcss({
        rem2rpx: true,
        cssEntries: [
          path.resolve(__dirname, 'src/app.css'),
        ],
      })
    )
  }
  // other option...
}

module.exports = config

src/app.css 按 Tailwind 版本选择入口：

src/app.css

/* Tailwind CSS 3.x */
@tailwind base;
@tailwind components;
@tailwind utilities;

src/app.css

/* Tailwind CSS 4.x */
@import "tailwindcss";
@source "./**/*.{html,js,ts,jsx,tsx,vue}";
@source not "../dist";
@source not "../node_modules";
@source not "../unpackage";

Tailwind CSS 3.x 的扫描范围写在 tailwind.config.js 的 content 里；Tailwind CSS 4.x 的扫描范围写在 CSS 入口的 @source 里。生成模式下不要再在 PostCSS 中注册 Tailwind 官方生成插件。