在Rails项目中使用Tailwind CSS无法实现两列布局，求排查方案

云原生阿岚

2026-6-28

可能的原因及排查方向

Tailwind配置未覆盖视图文件
Rails集成Tailwind时，tailwind.config.js里的content数组必须包含你的视图文件路径（比如app/views/**/*.html.erb）。如果没配置这条，Tailwind会自动剔除未检测到使用的类，导致grid相关样式没被生成。检查配置项，确保覆盖所有用到Tailwind类的视图文件。
缓存导致样式未更新
Rails资产管道缓存或浏览器缓存可能让新添加的Tailwind类不生效。执行rails assets:clobber清除本地资产缓存，重启服务器，再清空浏览器缓存后重新加载页面。
Tailwind版本不一致
你在Tailwind Playground使用的版本和Rails项目里的版本可能有差异，部分grid布局特性在旧版Tailwind中不支持。查看项目里的Tailwind版本（可通过package.json或Gemfile.lock查看），确保和Playground版本一致，或者升级到最新稳定版。
父元素样式冲突
检查grid容器的父元素，是否存在display: block、overflow: hidden等破坏grid布局的样式。可以给grid容器临时加border: 2px solid red，通过浏览器开发者工具查看它的实际尺寸和布局状态，确认是否被父元素挤压或覆盖。
自定义样式覆盖了grid属性
项目中的全局CSS或其他样式文件可能覆盖了Tailwind的grid样式，比如给div设置了display: block !important。用浏览器开发者工具查看grid容器的计算样式，确认display属性是否为grid，如果不是，找到对应的覆盖样式并调整。