如何使用Tailwind CSS实现两张卡片并排且无重叠？

你的卡片出现重叠，核心问题在于固定宽度与网格布局的冲突，加上多余的布局嵌套，具体修正方案如下：

问题根源 #

1. 卡片硬设置了w-96固定宽度，而外层grid-cols-3会根据父容器宽度分配每列空间，固定宽度的卡片会超出列的可用范围，导致重叠。
2. 嵌套了两层card类的容器，多余的外层div干扰了布局逻辑。

修改后的代码 #

<body>
  <div id="app">
    <h1 class="text-4xl text-center">Task</h1>
    
    <div class="grid grid-cols-12 p-4">
      <div class="col-span-9 m-4">
        <span>
                    <input
                            type="text"
                            placeholder="Escribe una tarea"
                            class="input input-bordered w-full"
                            v-model="task"
                            @keyup.enter="addTask"
                            id="task_input" />
                    </span>
      </div>
      
      <div class="col-span-3 m-4">
        <button class="btn btn-primary" @click="addTask" id="task_button">
          Agregar
        </button>
      </div>

      <!-- 改为grid-cols-2实现两张卡片并排，移除多余嵌套，卡片设为w-full -->
      <div class="grid grid-cols-2 gap-4" id="cardContainer">
        <div class="card bg-base-100 shadow-xl w-full">
          <div class="card-body">
            <h2 class="card-title">Card title!</h2>
            
            <p id="task_text" class="text-base-content">
              If a dog chews shoes whose shoes does he choose?
            </p>
            
            <div class="card-actions justify-end">
              <button class="btn btn-primary">Buy Now</button>
            </div>
          </div>
        </div>
        <!-- 第二张卡片示例 -->
        <div class="card bg-base-100 shadow-xl w-full">
          <div class="card-body">
            <h2 class="card-title">Second Card</h2>
            
            <p id="task_text_2" class="text-base-content">
              Another task content here.
            </p>
            
            <div class="card-actions justify-end">
              <button class="btn btn-primary">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.tailwindcss.com"></script>
  <!-- <script type="module" src="/main.js"></script> -->
</body>

关键改动说明 #

• 将卡片容器的grid-cols-3改为grid-cols-2，直接实现两张卡片并排。
• 移除卡片的w-96固定宽度，改用w-full让卡片占满所在网格列的全部宽度，避免超出范围。
• 删除多余的外层card容器，简化布局层级，减少干扰。
• 增加了第二张卡片的示例，验证并排效果。

额外提示 #

如果需要响应式适配（比如小屏幕下堆叠，大屏幕并排），可以把grid-cols-2改成md:grid-cols-2，这样在屏幕宽度小于768px时自动变为单列布局：

<div class="grid md:grid-cols-2 gap-4" id="cardContainer">

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