Tailwind CSS 如何支持动态自定义间距等值，无需逐一枚举config配置

完全可以实现无需逐一枚举配置值、直接使用任意数值生成对应样式的需求，不存在必须预先在配置里写死所有值的限制，具体有两类可落地的方案：

方案一：零配置使用原生任意值语法（最推荐） #

Tailwind V3 及以上版本默认开启的 JIT 引擎本身就支持直接在类名里写任意合法 CSS 值，完全不需要修改配置文件。
你原本要写的类名只需要加一对方括号包裹值即可：

<div className="mt-[15px] pb-[36px] h-[500px]"></div>

• 引擎会自动扫描代码中方括号包裹的内容，把内容直接作为对应CSS属性的值生成样式，不管是px、rem、%、vw甚至更复杂的计算值（比如calc(100vh - 80px)）都能直接支持
• 不需要预先在tailwind.config里声明任何自定义值，写多少数值就能生成多少对应的类，完全覆盖动态取值需求
• 这是官方原生支持的能力，没有维护成本，兼容性和后续版本适配性最好

方案二：实现无方括号的数值+px类名写法 #

如果你确实不想写方括号，希望直接用mt-15px这种格式的类名，不需要逐一声明每个px值，可以通过Tailwind的自定义插件API实现动态匹配，替代之前逐一枚举配置的写法：

// tailwind.config.js 中引入自定义插件
module.exports = {
  plugins: [
    ({ matchUtilities }) => {
      matchUtilities(
        {
          // 映射类名前缀到对应的CSS属性，需要支持哪些类就列哪些
          mt: value => ({ marginTop: `${value}px` }),
          pb: value => ({ paddingBottom: `${value}px` }),
          h: value => ({ height: `${value}px` }),
          // 可按需扩展：pt、mb、w、min-h等其他工具类
        },
        {
          // 动态匹配规则：捕获类名后缀里的纯数字部分，只要符合 数字+px 格式就自动生效
          values: (suffix) => {
            const matchResult = suffix.match(/^(\d+(?:\.\d+)?)px$/)
            return matchResult ? { [matchResult[1]]: matchResult[1] } : null
          }
        }
      )
    }
  ]
}

配置完成后，不管是mt-15px、pb-36px、h-500px还是带小数的h-123.45px都能直接生效，不需要为每个可能用到的数值单独在配置里写一行声明。

注意事项 #

• 不要直接在配置里写之前提到的"${var}px": "${var}px"格式的键值对，这种写法只会生成一个固定键名的配置项，不会被解析成动态占位符，根本无法实现动态匹配
• 动态匹配的正则规则要写得足够严格，只匹配符合预期的类名格式，避免误把其他无意义的类名也匹配成自定义值，生成冗余的无用CSS，增加最终产物体积
• 尽量优先选择官方原生的任意值语法，自己写自定义插件会增加后续版本升级的维护成本

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