您好，我有一个问题如何在 tailwind 的网格中使用 repeat 和 minmax。我做了这样的事情，但没有奏效。
const DetailedAssetCard = () => {
return (
<div className=" bg-gray-100 rounded-lg grid grid-cols-[repeat(4, minmax(100px, 500px))] ">
<div className="w-32 h-32 rounded-full ">
<Image src={Btc} alt="" />
</div>
<p>
Hello <span className="block ">123</span>
</p>
<p>
Hello <span className="block ">123</span>
</p>
<p>
Hello <span className="block ">123</span>
</p>
<p>
Hello <span className="block ">123</span>
</p>
<p>
Hello <span className="block ">123</span>
</p>
<p>
Hello <span className="block ">123</span>
</p>
</div>
);
};回答1
默认情况下，Tailwind 包含 grid-template-column 实用程序，用于创建具有最多 12 equal 列宽度的基本网格。您可以通过在 tailwind.config.js 文件中编辑 theme.gridTemplateColumns 或 theme.extend.gridTemplateColumns 来自定义这些 values。
所以你的 tailwind 配置文件应该是这样的
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
// added new 4 column grid as new4
'new4': 'repeat(4, minmax(100px, 500px))'
}
},
},
plugins: [],
}并像这样使用 grid-cols-new4。
const DetailedAssetCard = () => {
return (
<div className=" bg-gray-100 rounded-lg grid grid-cols-new4 ">
<div className="w-32 h-32 rounded-full ">
<Image src={Btc} alt="" />
</div>
<p>
Hello <span className="block ">123</span>
</p>
.
.
.
<p>
Hello <span className="block ">123</span>
</p>
</div>
);
};我创建了一个很好的例子 https://play.tailwindcss.com/uhxj8mrUHw?layout=horizontal 来了解更多。