如何在Tailwind CSS自定义动态网格中为--min-value传递任意值？

你的需求完全可行，不过当前写法grid-dynamicGrid[200px]不符合Tailwind语法规则，换用CSS变量结合任意值类的方式就能实现：

步骤1：保留现有Tailwind配置 #

你在tailwind.config.js里的配置无需修改，继续沿用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        dynamicGrid: 'repeat(auto-fit, minmax(var(--min-value), 1fr))',
      },
    },
  },
  plugins: [],
}

步骤2：在元素上动态注入CSS变量 #

Tailwind支持任意值类名，你可以通过[--min-value:XXX]的格式直接在元素的className里定义--min-value变量，再搭配自定义的grid-dynamicGrid类即可生效：

<div className="grid grid-dynamicGrid [--min-value:200px]">
  {Array(6).fill(' ').map((_, i: number) => <p key={i}>hello</p>)}
</div>

需要调整最小宽度时，直接修改[--min-value:XXX]里的数值即可，比如[--min-value:15rem]、[--min-value:300px]这类单位都支持。

原理说明 #

自定义类grid-dynamicGrid会引用CSS变量--min-value，我们通过任意值类给当前元素注入变量的具体值，既能保留auto-fit+1fr的自适应网格特性，又能灵活控制网格项的最小宽度。

内容的提问来源于stack exchange，提问作者Abdallah Ag