Tailwind中grid-template-columns的auto-fill效果实现问题

你出错的核心原因是Tailwind自定义网格列时，没有完整对应原生CSS的repeat()语法结构。

原生CSS的目标写法是：

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

而你写的grid grid-cols-[auto-fill_minmax(100px,_1fr)]，会让Tailwind生成无效的CSS：

grid-template-columns: auto-fill minmax(100px, 1fr);

这种写法不符合CSS网格的语法规则，自然无法生效。

正确的Tailwind写法 #

需要把完整的repeat()函数放入方括号内，才能生成符合要求的CSS：

<div class="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))]">
  <!-- 网格内容 -->
</div>

这样Tailwind会正确编译出你需要的自动填充自适应网格效果。

内容的提问来源于stack exchange，提问作者lucasbbs.dk