将TailwindCSS默认单位rem转换为px

 前言：

        我这里需要将 默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。

在tailwind.config.js文件中进行配置：

        注意：这里 padding（内边距）、spacing（外边距）、width（宽度）、height（高度）的转化都 *4，所以针对上述这几个属性配置后的使用效果示例如下：

        p-4  ==> padding: 16px;

        ml-1 ==> margin-left: 4px;

        w-2 ==> width: 8px;

        h-3 ==> height: 12px;

        leading-4 ==> line-height: 16px;

而 borderRadius（圆角）、 fontSize（字体）这两个属性就是直接转化，示例如下：

        text-18 ==> font-size: 18px;

        rounded-16 ==> border-radius: 16px;

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // 内边距
    padding: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index * 4}px`
      return map
    }, {}),
    // 外边距
    spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index * 4}px`
      return map
    }, {}),
    // 圆角
    borderRadius: Array.from({ length: 100 }).reduce((map, _, index) => {
      map[index] = `${index}px`
      return map
    }, {}),
    extend: {
      // 宽度
      width: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index * 4}px`
        return map
      }, {}),
      // 高度
      height: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index * 4}px`
        return map
      }, {}),
      // 字体大小
      fontSize: Array.from({ length: 100 }).reduce((map, _, index) => {
        map[index] = `${index}px`
        return map
      }, {}),
      // 行高
      lineHeight: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index * 4}px`
        return map
      }, {}),
    },
  },
  plugins: [],
}