Tailwind 4在Rails项目中w-1/5、w-2/5宽度类未生成问题排查

针对你在Rails+tailwindcss-rails环境下，升级到3.4版本（对应Tailwind 4）后w-1/5、w-2/5类未被生成的问题，可按以下步骤排查：

1. 检查Tailwind配置的宽度规则 #

如果你的tailwind.config.js中直接覆盖了theme.width而不是用extend，会丢失默认新增的分数宽度类：

// 错误示例：覆盖默认width，导致仅保留手动定义的类
module.exports = {
  theme: {
    width: {
      '1/3': '33.333333%',
      // 未包含1/5、2/5
    }
  }
}

解决：
改用theme.extend来扩展宽度，或者手动添加缺失的类：

module.exports = {
  theme: {
    extend: {
      width: {
        '1/5': '20%',
        '2/5': '40%',
      }
    }
  }
}

2. 确认内容扫描范围是否覆盖目标文件 #

Tailwind通过扫描指定路径下的文件来生成用到的类，如果你的新视图/组件不在扫描列表里，新增类不会被打包：

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/components/**/*.rb',
    './app/assets/javascripts/**/*.js',
    // 务必添加你使用w-1/5、w-2/5的文件路径
  ]
}

解决：
添加缺失的文件路径，然后重启Rails服务器或Tailwind的watch进程，确保最新代码被扫描到。

3. 清除缓存并重新编译 #

缓存问题可能导致旧的CSS文件未被更新：

• 运行rails tailwindcss:clobber清除已生成的CSS缓存
• 再执行rails tailwindcss:build重新编译
• 重启Rails服务器，确保新样式生效

4. 检查corePlugins是否禁用了宽度类 #

如果配置中禁用了width核心插件，会导致所有默认宽度类失效：

// 错误示例：禁用了width核心插件
module.exports = {
  corePlugins: {
    width: false,
  }
}

解决：
删除width: false配置，或者手动在theme.extend中定义需要的宽度类。

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