在uni-app+vue3+vite项目里使用tailwindcss（postcss方式引入），默认rem单位转换成rpx

tailwindcss引入

安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

在vite.config.js配置文件中，使用 postcss 内联的写法注册 tailwindcss

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
  ],
  css: {
    postcss: {
      plugins: [
        require("autoprefixer"),
        require("tailwindcss"),
      ],
    },
    // https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ["legacy-js-api"],
      },
    },
  },
});

添加 tailwind.config.js 配置文件

module.exports = {
  separator: '__', // 小程序项目需要设置这一项，将 : 选择器替换成 __，之后 hover:bg-red-500 将改为 hover__bg-red-500 
  content: [
    './src/components/**/*.{html,js,vue}',
    './src/pages/**/*.{html,js,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    // 小程序不需要 preflight和container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false, // 预设样式  
    container: false,
	// 以下功能小程序不支持  
	space: false, // > 子节点选择器  
	divideWidth: false,  
	divideColor: false,  
    divideStyle: false,  
    divideOpacity: false,  
  }
};

将加载 Tailwind 的指令添加到你的 CSS 文件中

在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

<style>
/* @tailwind base;  /* 如果是小程序的话，这一行注释掉，因为tailwind base模块提供的一些样式选择器是基于*，这在小程序中会报错 */
@tailwind components;
@tailwind utilities;
</style>

tailwindcss换算单位，将默认的rem换算成rpx

借助插件：postcss-rem-to-responsive-pixel

postcss: {
  plugins: [
    require("autoprefixer"),
    require("tailwindcss"),
    require("postcss-rem-to-responsive-pixel")({
      rootValue: 40, // 意味着 1rem = 40rpx, ml-1转换成 margin-left: 10rpx;
      propList: ["*"], // 默认所有属性都转化
      transformUnit: "rpx", // 转化的单位,可以变成 px / rpx
    }),
  ],
},