如何让TailwindCSS的bg-url与Rails Active Storage的rails_blob_url兼容？

问题原因 #

Tailwind CSS的JIT编译器是构建时编译，它需要在编译阶段识别完整的类名（包括bg-[url(...)]里的URL）才能生成对应CSS。而rails_blob_url是运行时生成的动态URL，编译阶段Tailwind无法获取到实际URL值，因此不会生成对应的背景图CSS类，导致第二个div空白。第一个div用的是静态URL，编译时能被捕获，所以正常生效。

解决办法 #

最直接靠谱的方式是结合Tailwind工具类和内联style：

<div class="w-full h-24 bg-no-repeat bg-cover" style="background-image: url(<%= rails_blob_url(current_house.hero_image) %>)"></div>

• 用Tailwind的bg-no-repeat、bg-cover控制背景的重复和缩放行为
• 用内联style设置动态生成的背景图片URL，内联样式是运行时生效，不需要Tailwind提前编译

不推荐方案（仅作参考） #

如果硬要使用Tailwind的bg-[url(...)]语法，只能把所有可能的Active Storage URL添加到Tailwind的safelist中，但每个Blob的URL都带唯一哈希值，这个操作几乎不可行，除非你只有固定几个静态Blob，因此不建议这么做。

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