TailwindCSS 如何配置默认单位为px

在Tailwind CSS中，默认的尺寸单位是rem，但你可以通过配置Tailwind CSS的配置文件来改变默认单位。

首先，确保你有一个tailwind.config.js文件在你的项目根目录中。如果没有，你可以通过运行npx tailwindcss init来创建这个文件。

然后，在tailwind.config.js文件中，你可以使用theme对象的spacing键来指定单位。例如，如果你想要将所有间距单位改为px，你可以这样做：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        1: '4px',
        2: '8px',
        3: '12px',
        4: '16px',
        5: '20px',
        6: '24px',
        7: '28px',
        8: '32px',
        9: '36px',
      },
    },
  },
  // 其他配置...
};

请注意，这将改变所有间距（包括padding、margin等）的默认单位。如果你只想改变默认字体大小单位，可以使用fontSize键：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xs': ['10px', '12px'],
        'sm': ['12px', '14px'],
        'base': ['14px', '16px'],
        'lg': ['16px', '18px'],
        'xl': ['18px', '20px'],
        // 更多尺寸...
      },
    },
  },
  // 其他配置...
};

这样配置后，Tailwind CSS将使用px作为默认字体大小单位。