Tailwind中响应式col-span-{n}会重置col-start-{n}？是否为预期行为

这是Tailwind的预期行为，核心原因在于CSS网格属性的简写规则：

• col-start-{n} 对应CSS的 grid-column-start 属性，仅负责指定网格项的起始列位置。
• col-span-{n} 对应CSS的 grid-column 简写属性，这个属性会同时覆盖 grid-column-start 和 grid-column-end 的值。

当你使用 col-start-2 col-span-2 md:col-span-3 时：

1. 在非md断点下，元素样式为 grid-column-start: 2; grid-column-end: span 2;，符合从第2列开始占2列的预期。
2. 进入md断点后，md:col-span-3 生成 grid-column: span 3 的样式，这个简写会把 grid-column-start 重置为默认的 auto（即第1列），同时设置结束位置为跨越3列，导致起始位置被覆盖。

解决方法 #

如果需要在md断点下保持起始位置为第2列，必须显式添加响应式的 md:col-start-2 类，完整类名如下：

col-start-2 col-span-2 md:col-start-2 md:col-span-3

修改后的代码示例：

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <p>The 😲 now starts at column 2 across all screen sizes</p>
  <div class="grid grid-cols-6 gap-2">
    <div class="col-start-2 col-span-2 bg-red-50 md:col-start-2 md:col-span-3">😲</div>
  </div>

  <!-- SCREEN SIZE DEBUG HELPER, IGNORE -->
  <div class="p-1 fixed mt-20 text-xl text-white bg-purple-400 rounded-lg">
    <span>Screen Size:</span>
    <span class="hidden 2xl:inline">2XL</span>
    <span class="hidden md:inline lg:hidden">MD</span>
    <span class="hidden sm:inline md:hidden">SM</span>
    <span class="inline sm:hidden">XS</span>
  </div>
</body>

</html>

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