Weapp-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

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

package.json

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

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

配置

更改 vite.config.ts 注册 weapp-tailwindcss

vite.config.ts

import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import { defineConfig } from 'weapp-vite/config'

export default defineConfig({
  plugins: [
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      tailwindcss: {
        // 显示声明用的是 tailwindcss v4
        version: 4,
        v4: {
          cssEntries: [
            // app.css 的路径
            path.resolve(import.meta.dirname, './app.css'),
          ],
        },
      },
    }),
  ],
})

添加 postcss.config.js 注册 @tailwindcss/postcss

postcss.config.js

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

添加样式

在项目目录下，小程序全局的 app.css 中，添加以下内容：

app.css

@import "weapp-tailwindcss";

更改好配置之后，直接启动即可