H5-frontend/tailwind.config.js

const path = require("path");
const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 增加前辍避免样式冲突
  prefix: 'tw-',
  // 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
  // 你要有其他目录，比如 components，也必须在这里，添加一下
  content: [
    "./index.html",
    "./pages/**/*.{html,js,ts,jsx,tsx,vue}",
    "./components/**/*.{html,js,ts,jsx,tsx,vue}",
    "./business/**/*.{html,js,ts,jsx,tsx,vue}",
    "./modules/**/*.{html,js,ts,jsx,tsx,vue}",
  ].map(resolve),
  corePlugins: {
    // 跨多端可以 h5 开启，小程序关闭
    preflight: false,
  },
  theme: {
    extend: {
      // 使用rpx作为单位
      spacing: {
        '30': '30rpx',
        '40': '40rpx',
        '50': '50rpx',
      }
    }
  },
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 4,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
  ],

};