javascript - 如何创建具有动态数量的网格列的 TailwindCSS 网格？

Question

我将 Vue3 与 TailwindCSS 结合使用，并希望创建一个带有动态 grid-cols-{n} 类的网格。我知道 TailwindCSS 默认最多支持 12 列，但我无法自定义主题，因为列数是完全动态的。

给定以下纯 HTML/Js 示例

const amountOfItemsPerRow = 16;

const container = document.getElementById("container");

for (let i = 0; i < amountOfItemsPerRow; i++) {
  const item = document.createElement("div");
  item.innerText = i;
  container.appendChild(item);
}

container.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12

<script src="https://cdn.tailwindcss.com"></script>

<div id="container" class="grid"></div>

如果 amountOfItemsPerRow 小于或等于 12，此代码可以正常工作，否则 CSS 将被破坏。

我是否必须编写代码来设置纯 CSS 来解决这个问题，还是有动态的 Tailwind 解决方案？

---

另一种方法:

基于 the docs我试着换行

container.classList.add(`grid-cols-${amountOfItemsPerRow}`);

与

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);

想出一个“本地”方法，但这没有帮助。

Answer 1

你不能用普通的 TailwindCSS 做到这一点。

@Ajay Raja 的建议是行不通的，因为它只适用于 JIT(即时)；因此，在编译应用程序之前，您可以使用任意值，但是一旦您编译并部署了不能动态的 bundle 。 它只在构建时有效；所以如果你使用的是 CDN，你就做不到

您可以做的是查看类的实现并设置一些 javascript 监听器来动态设置样式属性:

来自 here你可以看到 .grid-columns-12 的实现。

.grid-columns-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

所以从 JS 你可以做如下的事情:

function setDynamicColumns(cols) {
  document
    .querySelector('#elementWithDynamicGrid')
    .style['grid-template-columns'] = `repeat(${cols}, minmax(0, 1fr))`
}

我不是 Vue 专家，但您可以像在 Angular 或 React 上那样设置双向数据绑定(bind)。

你在这里做了什么

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`)

没有工作，因为你正在将 style 指令应用到 class 属性中

---

解决此问题的另一种方法是在构建时生成必要数量的类，以便您可以在运行时安全地使用它们:

如果你看一下 docs here

您可以通过修改 tailwind.config.js 文件来添加您自己的自定义网格修饰符。

module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {        
      // Simple 16 column grid        
      '16': 'repeat(16, minmax(0, 1fr))',     
      }    
    }  
  }
}

因此您可以添加一个函数来生成合理数量的列，如下所示:

//tailwind.config.js
function generateGridColumns(lastValue) {
   let obj = {}
   for(let i = 13; i < lastValue; i++) {
     obj[`${i}`] = `repeat(${i}, minmax(0, 1fr))`
   }
   return obj
}


module.exports = {  
  theme: {    
    extend: {      
      gridTemplateColumns: {
         ...generateGridColumns(100) // This generates the columns from 12 until 100
      }    
    }  
  }
}

请记住，当清除您的 tailwindCSS 构建时，您需要指示保留所有 grid-columns-* 类，因为清除器无法猜测您将要使用它们