Responsive col-span-{n} resets col-start-{n}

probablyCorey 0
Viewed 19

In tailwindcss, it seems like the start col-start-{n} class is ignored if you set span col-span-{n} class on a screen breakpoint. For example: col-start-2 col-span-2 md:col-span-3 when you reach the md breakpoint the col-start-2 is ignored.

Is this the expected behavior in tailwind? I can't find it documented anywhere.

<!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  should always start at column 2, but when it reaches the "md" screen width, it starts at column 1</p>
  <div class="grid grid-cols-6 gap-2">
    <div class="col-start-2 col-span-2 bg-red-50 md:col-span-3"></div>
  </div>

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

</html>

tailwind-css
1 Answers

The problem as you mentioned, the col-span will override the col-start

Here is a comment I found by the creator of Tailwind CSS

enter image description here

Solution:

Add md:col-start-2 class, and it should work perfectly.

Mohamed Ghulam0
Related