如何动态填充tailwindcss grid-cols-x 属性？

Question

我目前正在使用 NextJs 和 TailwindCss 开发一个页面。用户可以在本地加载图像并设置他们希望将图像分割成的块数 horiz/vert (rows/cols)。为了正确显示它，我需要将网格设置为parent 元素中适当的列数。

我有一个 API 我在本地调用，它使用 sharp 执行拆分并计算宽度和高度，我对数组中的图像进行排序，以便它们按顺序排列，因为它是异步的。然后我还生成一个动态 class 字符串，它只填充适当数量的列，以便稍后分配给我的 parent 网格元素 class.

CLASS 字符串数量

const gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;

//*** At this point, the value of gridClass, if columns were set to 3, using template literals is :

'grid grid-cols-3 gap-2 pt-2'

//The proper string is now populated and passed back in the API response via classCss key

res.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass})

页面片段：

<div id="final">
  <div className={tileCss} > //<--This is where I pull in the generated class string
    {
      imageData.map((nft, i)=>(
        <div key={i} className='border shadow rounded-x1 overflow-hidden'>
          <Image src={nft.imgSrc}  alt="image" layout="responsive" width={nft.tileDimX} height={nft.tileDimY}/>
        </div>
       ))
     }
   </div>
</div>

这有时有效，但有时无效。通常如果我将列设置为 3，它似乎可以正常工作，但如果我将它设置为 5 可以说，无论输入图像大小如何，它只是将它们全部放在一个带有大图像的列中。然而奇怪的是，页面上的 parent 网格 class 是正确的，只是似乎没有遵守。我将在下面提供一些快照来展示我在说什么。几天来我一直在努力解决这个问题，但是我没有运气，因为我是 NextJs 的新手，所以我想我会在这里分享，看看我是否只是在做一些愚蠢的事情。谢谢！

下面的结果似乎也不关心视图 window 是否被拉宽或缩小。我只是拍了下面的快照，以便您可以在较小的视图中看到发生了什么 window。

这是预期结果，图像列应与用户输入的列相匹配：

注意 css class 也如何显示在样式下：

这是不正确的结果，用户选择了 5 列，图像被拆分为正确数量的列，但在前端网格中的显示不符合 css。

如您所见，grid-cols-5 从 class 的角度来看是正确的，但查看的结果并不符合这一点。

Grid-cols-5 在 html class 中，但在应用的样式下缺失：

Answer 1

我注意到的问题之一是 grid-cols-${numCols} 行

const gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;

TailwindCSS 不允许您动态生成 classes。因此，当您使用以下命令生成 class…grid-cols-${numCols} 作为字符串时。

…TailwindCSS 不会将其作为有效的 TailwindCSS class 选择，因此不会产生必要的 CSS.

您可以使用获得 numCols 的函数，而不是 return 计算 numCols 的值，只需 return grid-cols-${numCols}。

假设你的函数是getNumofCols()，然后像这样修改它

function getNumofCols() {
  ...
  ...
  ...
  ...
  ...
 
  return "grid-cols-" + numCols ;
}

所以它 return 是完整的字符串。

并再次使用它

const gridClass = `grid ${getNumofCols()} gap-2 pt-2`;

If your function uses any parameter then you can create a new function and call this function and just add grid-cols- to the return value.

通过这种方式，每个 class 的整个字符串都在您的源代码中，因此 Tailwind 将知道生成适用的 CSS.

Answer 2

所以我终于找到了问题的根源。 tailwindcss 似乎对引入的 classes 进行了优化，如果您没有在 html 中的任何地方使用 class，它不包括那些 classes。所以我不仅需要 return 我的动态字符串与预期的 class，而且我还需要将我可能使用的所有 classes 添加到我的 tailwind.config.js 文件中在安全列表键下。

所以我的配置现在看起来像这样并且按预期工作：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
],
safelist: [
  {
      pattern: /grid-cols-./,
  }
],
  theme: {
    extend: {},
  },
  plugins: [],
}

可在此处找到更多信息： https://tailwindcss.com/docs/content-configuration#using-regular-expressions

再次感谢 Mohit 的协助。

如何动态填充tailwindcss grid-cols-x 属性？

How to dynamically populate tailwindcss grid-cols-x property?

reactjs

next.js

tailwind-css

nextjs-image