Tailwind Grid布局设为2列却显示垂直排列问题求助

核心问题 #

你把v-for循环放在了grid容器元素上，导致每次循环都会生成一个独立的.grid容器，每个容器里只有一个Course组件，自然只能垂直排列。

修复步骤 #

1. 调整v-for的位置
   把v-for从带grid类的div移到Course组件上，让单个grid容器包含所有循环生成的Course元素，这样grid布局才能作用于多个子元素。

2. （可选）更新Gap类名
   Tailwind v3推荐使用gap-x/gap-y替代旧的col-gap/row-gap，虽然旧类仍能工作，但统一用新类更符合当前规范。

修改后的代码示例 #

<template>
<div>
    <div class="w-full md:w-3/5 p-4">
        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-1 gap-x-2 md:gap-x-8 md:gap-y-10">
            <Course 
                v-for="c in 4" 
                :key="c"
                title="The G Course"
                description="A crash course!"
                lessons="3"
                length="1 hr"/>
        </div>
    </div>
</div>
</template>

额外检查 #

你的tailwind.config.js配置没问题，content路径已经覆盖了Vue文件，确保Tailwind能正确扫描到这些类名。

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