tailwindcss 如何配置默认单位为px

vue2使用tailwind发现p-[16px]这种中括号内指定像素的方法无效，于是动手改造默认的rex为px。

tailwindcss 如何配置默认单位为px

修改  tailwind.config.js配置文件中的theme属性

/** @type {import('tailwindcss').Config} / module.exports = { purge: { enabled: false, content: ["./src/**/.{js,jsx,ts,tsx}"], }, content: [], theme: { spacing: Array.from({ length: 1000 }).reduce((map, _, index) => { map[index] = ${index}px; return map; }, {}), extend: {}, }, plugins: [], };

发现上面配置字体的方法无效，改为下面的，起效果了。

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    extend: {
      fontSize:Array.from({ length: 100 }).reduce((map, _, index) => {
        map[index] = `${index}px`;
        return map;
      }, {}),
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}