Tailwind无法正确生成全部col-span-{n}类的问题排查

问题原因 #

直接在theme.gridColumn下覆盖配置时，自定义的span项与Tailwind内置的默认列跨度类产生冲突，导致CSS生成过程中随机缺失一个类。

解决方案 #

不要直接覆盖gridColumn配置，改用theme.extend来添加自定义项（仅保留默认没有的特殊规则即可）。Tailwind默认已经包含span-1到span-12以及span-full这些类，完全不需要重复定义。

修改后的配置示例：

module.exports = {
  theme: {
    extend: {
      // 仅添加默认未覆盖的自定义gridColumn规则，比如特殊跨度需求
      // gridColumn: {
      //   'span-custom': 'span 3 / span 5',
      // },
    },
  },
  // 其他配置...
}

如果确实需要完全自定义所有gridColumn类（不推荐，默认配置已满足常规需求），需确保自定义项逻辑与默认规则一致，不过最稳妥的方式仍是使用extend进行合并。

验证效果 #

修改配置后重新编译Tailwind CSS，所有.col-span-{n}类都会正常生成，不会再出现缺失情况。

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