如何在SvelteKit中使用尾风背景图 [英] 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]类工作正常，所以我认为TailWind在Svelte文件路径上有问题？

编辑： Sole.log(Global)的输出为src/assets/bg/bg_globe2.png。

推荐答案

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

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

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

TailWind需要在代码中找到完整文本值才能生成实用程序类。

这篇关于如何在SvelteKit中使用尾风背景图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！