Tailwind中如何自定义px-10等内边距工具类的数值配置

因为你需要的px-10左右内边距值不同，无法通过扩展默认spacing配置实现，推荐用以下两种方案覆盖原有工具类：

方案1：全局CSS文件中自定义（操作最简单） #

在你引入Tailwind指令的全局CSS文件（通常是index.css或global.css）中添加自定义工具类即可：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .px-10 {
    padding-left: 10;
    padding-right: 10px;
  }
}

@layer utilities中定义的样式优先级高于Tailwind默认工具类，会直接覆盖原有px-10的生效样式。

方案2：配置文件中通过插件自定义 #

如果希望所有配置统一维护在tailwind.config.js中，可以用插件API实现：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 保持你原有content、theme等配置不变
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.px-10': {
          paddingLeft: '10',
          paddingRight: '10px'
        }
      })
    }
  ]
}

注意：你需求里的padding-left: 10没有带单位，部分浏览器可能无法识别该规则，若为笔误需要带单位的话，修改为对应单位即可，比如10px、10rem。

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