本文介绍了如何在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
。
推荐答案
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
TailWind需要在代码中找到完整文本值才能生成实用程序类。
这篇关于如何在SvelteKit中使用尾风背景图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!