带顺风的动态背景

Question

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

 <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}\')]...`

在您建议我使用样式属性之前，请注意传入的值必须根据屏幕尺寸进行更改。我读到不能从动态值计算任意值。有任何可能的解决方法吗？

Answer 1

您无法使用 Tailwind 动态生成类。该代码永远不会进入您的输出 CSS.

与其将背景图片属性设置为内联，否则您将无法响应地进行交换，而是使用自定义属性。在样式属性中为小背景和大背景设置自定义属性，并在 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,
  }}
>

带顺风的动态背景

Dynamic Background w/ tailwind

jsx

media-queries

reactjs

next.js

tailwind-css