Tailwind CSS w-11/12类异常：显示100%而非91.66%求助

问题背景 #

Tailwind CSS v1中，w-11/12类的官方定义应为91.666%宽度，但实际渲染时会和w-full一样显示为100%，其余12等分宽度类均正常，这是v1版本的已知Bug，已有不少开发者反馈过。

可行解决办法 #

• 自定义工具类覆盖
  在Tailwind配置文件的theme.extend.width中手动添加正确的11/12值，覆盖默认的错误定义：

  module.exports = {
    theme: {
      extend: {
        width: {
          '11/12': '91.666667%',
        },
      },
    },
  }
  

  重新编译样式后即可生效。

• 针对11/12做特殊处理
  在你的评分进度条逻辑中，判断当计算结果为11时，改用内联样式设置宽度，避免使用有问题的类：

  <div className="flex items-center mt-4">
    <span className="text-sm font-medium">3 star</span>
    <div className="w-2/4 h-5 mx-4 bg-gray-200 rounded dark:bg-gray-700">
      {(ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33) > 0 && (
        <div
          className={`h-5 bg-yellow-400 rounded ${
            (ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33).toFixed(0) !== '11'
              ? `w-${(ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33).toFixed(0)}/12`
              : ''
          }`}
          style={
            (ratings.filter(val => val == 3).length / ratings.length * 100 / 8.33).toFixed(0) === '11'
              ? { width: '91.666667%' }
              : {}
          }
        ></div>
      )}
    </div>
    <span className="text-sm font-medium">{(ratings.filter(val => val == 3).length / ratings.length * 100).toFixed(0)}%</span>
  </div>
  

• 升级Tailwind版本
  该Bug在Tailwind v2及后续版本中已被修复，若项目没有强依赖v1的限制，直接升级到最新稳定版是最彻底的解决方案。

问题原因 #

Tailwind v1的早期版本中，12等分宽度的生成逻辑存在边界值错误，导致w-11/12被错误映射为100%宽度，与w-full的定义冲突。

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