Tailwind 和动态类似乎缺失

Question

我在 Laravel 应用程序中使用 Tailwind。在任何 Blade 视图中使用一些带有动态参数的 TW 类时：

<div class="bg-[url('{{ $myBackgroundImageWithPublicSubPath }}')]" > Any content </div>

在浏览器中渲染页面时它不起作用。检查源代码似乎缺少该类。

正如 TW 文档明确指出的那样（https://tailwindcss.com/docs/content-configuration#dynamic-class-names）TW 与动态类作斗争，因为他们使用正则表达式检查源代码以修剪最终的css 包，那么它会错过正确的类，因为在视图的脚本中找不到它。

您找到解决这个问题的办法了吗？

Answer 1

您说得对，Tailwind CSS 依赖于代码的静态分析来生成其样式，并且像您尝试使用的那样的动态类不会包含在最终的 CSS 输出中。

在这种情况下，一种解决方法是使用内联样式。 Laravel 允许您将变量直接回显到 Blade 模板中，因此您可以执行以下操作：

<div style="background-image: url('{{ asset($myBackgroundImageWithPublicSubPath) }}');" class="bg-cover">
    Any content
</div>