Tailwind CSS 如何使用自定义百分比设置内边距padding？

问题原因 #

Tailwind 默认的类名扫描逻辑无法正确识别带%特殊字符的自定义类，你配置的'80\%'对应的类名p-80%不会被扫描生成对应样式，因此不生效。

可行解决方案 #

方案1：无需配置，直接使用JIT动态值（推荐临时使用场景） #

Tailwind v3 及以上版本默认开启JIT模式，支持直接在类名中用方括号包裹自定义值，你不需要修改任何配置，直接在代码中写p-[80%]即可实现80%的内边距。
该方式适用于所有基于spacing的属性，比如m-[20%]（外边距20%）、w-[45%]（宽度45%）都支持。

方案2：配置全局通用自定义spacing（适合项目高频使用场景） #

如果这个80%的间距是项目中多处需要用到的通用值，你可以修改tailwind.config.js的spacing配置，将key替换为不带特殊字符的命名即可：

theme: {
    extend: {
      spacing: {
        '80p': '80%',
      }
    },
  },

配置完成后重启开发服务，就可以全局使用p-80p、m-80p、w-80p等对应类，效果和你预期的80%完全一致。

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