uni-app cli vue2 webpack

安装

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

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

package.json

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

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

配置

创建 vue.config.js

vue.config.js

const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  // some option...
  configureWebpack: (config) => {
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        rem2rpx: true,
      })
    )
  }
  // other option...
}

module.exports = config

配置 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

添加样式

在项目目录下，创建一个 index.css，然后添加以下内容：

index.css

@import "weapp-tailwindcss";

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

参考模板

https://github.com/icebreaker-template/uni-app-webpack-tailwindcss-v4