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

Question

https://tailwindcss.com/docs/background-image#任意-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。

Answer 1

\n

\xe2\x9d\x8c 无法从动态值计算任意值
\n<div class="bg-{ userThemeColor }"></div>

\n

\xe2\x9c\x85 对真正动态或用户定义的值使用内联样式
\n<div style="background-color: { userThemeColor }"></div>

\n

\n

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

\n

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

\n