如何在 SvelteKit 中使用 Tailwind 背景图像答案

【问题标题】：How to use Tailwind background-image in SvelteKit如何在 SvelteKit 中使用 Tailwind 背景图像
【发布时间】：2022-01-04 22:13:39
【问题描述】：

https://tailwindcss.com/docs/background-image#arbitrary-values

这就是我想使用 Tailwind bg-image 功能的方式。这在使用 SvelteKit next 160 和 Tailwind 3.0.9 时不起作用。

代码：

<script>
  import globe from '$assets/bg/bg_globe2.png'
</script>

<div
    class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
  //children
</div>

bg-[right_-14rem_bottom_-10rem] 类可以正常工作，所以我认为 Tailwind 的 Svelte 文件路径有问题？

编辑： console.log(globe) 的输出是src/assets/bg/bg_globe2.png。

【问题讨论】：

console.log(globe) 的输出是什么？您能否将其添加到您的问题中？
在我这边进行了测试，结果与您的相同。任意值用于定位并显示在样式检查器中，但即使路径正确（并且经过测试），背景图像的任意值也不会被考虑在内，所以我不确定这是路径问题吗？跨度>
@JHeth 我检查了，没有改变任何东西。测试了开发和构建+预览，同样的事情。图片路径有效，顺风语法看起来正确，但没有为 div 生成 background-image 样式。
@JHeth 刚刚使用硬编码的绝对 URL（与您的顺风操场中的相同）进行了测试，但没有显示背景图像。所以这显然不是 URL/路径问题。
我刚刚测试了一个全新的 SvelteKit 安装，以下工作正常 bg-[image:url('/src/assets/svelte.png')] 但没有任何形式的路径作为变量工作，包括导入。外部图像 URL 既可以内联，也可以作为我的变量。 Tailwind 似乎正在清除任何使用本地文件作为变量的尝试。

标签： tailwind-css svelte svelte-3 sveltekit

【解决方案1】：

❌ 不能从动态值计算任意值
<div class="bg-{ userThemeColor }"></div>

✅ 为真正动态或用户定义的值使用内联样式
<div style="background-color: { userThemeColor }"></div>

https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

Tailwind 需要在您的代码中找到全文值才能生成实用程序类。

【讨论】：