TailwindCSS v3.3.3无法识别自定义百分比宽度4/48的问题

问题原因 #

Tailwind CSS v3 新增了动态分数宽度类的自动生成机制：当类名采用w-n/m（如w-4/48）格式时，框架会自动计算n÷m×100%的百分比值，且该逻辑优先级高于你在theme.width中定义的同名自定义配置。而Tailwind v2.2.16没有这个动态生成功能，因此你的自定义配置能正常生效。

解决方案 #

方案1：修改自定义类命名，避免冲突 #

将分数格式的键名改为非动态计算的格式，比如用连字符替代斜杠：

width: {
  // ...其他原有配置
  '4-48': '8.333333%',
  '1-48': '2.083333%',
  // 其余48分制宽度同理修改
  88: '22rem',
  140: '35rem',
},

使用时直接写w-4-48即可。

方案2：将自定义配置移至theme.extend #

如果想保留4/48这类命名，将自定义宽度配置放在theme.extend.width下，而非直接覆盖theme.width，这样自定义配置会与框架动态生成的类共存，且自定义值会覆盖同名的动态生成值：

module.exports = {
  theme: {
    extend: {
      width: {
        '12/25': '48%',
        '1/24': '4.166666%',
        // ...所有原有自定义宽度配置
        88: '22rem',
        140: '35rem',
      },
    },
  },
  // ...其他配置
};

方案3：直接使用默认等价类 #

由于4/48等价于1/12，而Tailwind默认提供w-1/12类（对应8.333333%），可以直接替换使用，无需自定义。

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