Tailwind CSS 网格提供 3 行而不是 3 列，但仅适用于 grid-cols-6

Question

Answer 1

如果您在 Tailwind Play 中测试代码，您会发现它工作正常（如预期），因此可能有一些 CSS 覆盖此类：

grid-cols-3

。你应该检查一下。

但是我对 Laravel Livewire 也有类似的问题我检查了内置的 css 文件，我注意到定义了这个类：

.md\:grid-cols-3

所以在我的例子中这解决了：

<div class="grid md:grid-cols-3">
    <div> Col 1 </div>
    <div> Col 2 </div>
    <div> Col 3 </div>
</div>

Answer 2

我正在使用 Laravel Breeze 并遇到了同样的问题。 grid-col-1、grid-col-2、grid-col-4 有效，但 grid-col-3 无效。

如果通过运行

npm run dev

重新生成 CSS，它就可以工作。 Tailwind 使用了一个名为 purgecss 的插件，所以我认为这就是原因。非常令人沮丧的错误定位

Answer 3

我在 next.js/tailwind 中遇到同样的问题 @paddys_1 答案给了我正确的提示。我通过添加解决了这个问题

<div className='grid grid-cols-3 hidden'><div>1</div><div>2</div><div>3</div></div>

正文标签中的某处。