如何将Tailwind CSS默认内边距单位从rem改为px？

你之前直接修改theme区块里的padding属性没用，是因为Tailwind的padding类依赖于全局的spacing系统，不是单独配置padding就能改的。正确做法是覆盖spacing配置，把默认的rem值换成px：

方法一：手动定义间距值 #

打开tailwind.config.js，在theme下直接设置spacing，把默认的rem对应值转成px（默认1rem=16px）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 根据你的项目路径调整
  theme: {
    spacing: {
      '0': '0px',
      '1': '4px',   // 对应默认0.25rem
      '2': '8px',   // 对应默认0.5rem
      '3': '12px',  // 对应默认0.75rem
      '4': '16px',  // 对应默认1rem
      '5': '20px',  // 对应默认1.25rem
      '6': '24px',  // 对应默认1.5rem
      '8': '32px',  // 对应默认2rem
      '10': '40px', // 对应默认2.5rem
      '12': '48px', // 对应默认3rem
      // 按需添加更多你需要的间距值
    },
    extend: {
      // 保留你原来的其他自定义配置
    },
  },
  plugins: [],
}

方法二：批量转换默认间距 #

不想手动写每个值的话，可以用代码自动把默认的rem间距转成px：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    spacing: Object.fromEntries(
      Object.entries(require('tailwindcss/defaultTheme').spacing).map(([key, value]) => {
        // 自动将rem单位转为px（基于1rem=16px的默认比例）
        if (value.endsWith('rem')) {
          const remNum = parseFloat(value);
          return [key, `${remNum * 16}px`];
        }
        return [key, value];
      })
    ),
    extend: {
      // 其他自定义配置
    },
  },
  plugins: [],
}

配置完成后重启Tailwind的构建服务，所有基于spacing的类（包括padding、margin、width、height等）都会自动使用px单位。

内容的提问来源于stack exchange，提问作者vinayak hurkadli