如何在 SvelteKit 中使用 Tailwind 背景图片
How to use Tailwind background-image in SvelteKit
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] class 可以正常工作，所以我假设 Tailwind 对 Svelte 文件路径有问题？
编辑：
console.log(globe) 的输出是 src/assets/bg/bg_globe2.png.
❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-{ userThemeColor }"></div>
✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: { userThemeColor }"></div>
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
Tailwind 需要在您的代码中找到全文值才能生成实用程序 类。
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] class 可以正常工作，所以我假设 Tailwind 对 Svelte 文件路径有问题？
编辑：
console.log(globe) 的输出是 src/assets/bg/bg_globe2.png.
❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-{ userThemeColor }"></div>✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: { userThemeColor }"></div>
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
Tailwind 需要在您的代码中找到全文值才能生成实用程序 类。