动态背景w/顺风

Question

我目前正在尝试使用多个图像大小的动态背景，使用模板文字的顺风，但无济于事。

<div className={`bg-[url('../public${small}')] md:bg-[url('../public${large}')]` grid grid-cols-3 bg-cover shrink-0 w-60 ml-4  h-36 rounded-lg md:ml-2`}>
<div className=" visible col-span-2 self-end">
<div className='text-left ml-4 mb-2'>
<div className='movie-info opacity-70 align-middle  text-xs font-light space-x-1 flex text-x-white'>
<p>{year}</p>
<span>&bull;</span>      
<div className='flex align-middle'>
<img
src="/assets/icon-category-movie.svg"
alt=""
className="w-3 mr-1"
/>
<span >{category}</span>
</div>
<span>&bull;</span>      
<p>{rating}</p>
</div>
<h1 className='text-base'>{title}</h1>
</div>
</div>
<div className="bg-x-mirage w-6 h-6 flex justify-center items-center rounded-full mr-4 my-2 mx-auto opacity-70 md:w-10 md:h-10 md:mt-3 md:mr-3">
<img
src="/assets/icon-bookmark-empty-new.svg"
alt=""
className="w-2 m-auto  md:w-3"
/>
</div>
</div>

我对....这行有疑问

`bg-[url('../public${small}')] md:bg-[url('../public${large}')]...`

在你建议我应该使用style属性之前，请注意传入的值必须根据屏幕大小进行更改。我读到过，任意值不能从动态值中计算出来。有什么可能的解决办法吗?

Answer 1

不能使用Tailwind动态生成类。这些代码永远不会出现在你的输出CSS中。

与其将背景图像属性设置为内联的，还不如使用自定义属性。在style属性中设置小背景和大背景的自定义属性，并在Tailwind中应用任意值。

的例子:

<div 
className='bg-[image:var(--bg-small-url)] md:bg-[image:var(--bg-large-url)] restOfClasses...'
style={{
'var(--bg-small-url)': smallImageUrl,
'var(--bg-large-url)': largeImageUrl,
}}
>