Vue's transition-group breaks the new grid feature.

[antimanada]

Hi, im trying to use the new feature grid grid-cols-5... with vue transition-group but the result is rendered in just one column. I've inspected on devtools and i fount what us happening. The transition-group puto the hole v-for iteration inside a span and it endup in just one column.

Do you guys know how to fix it?

Here is the code:

Here is the result:

Here is the devtools result:

[adamwathan]

The transition-group component creates an extra span wrapper element (which you can see in your dev tools screenshot) so your grid only has one direct child.

Try moving your grid classes directly onto the transition-group and adding the tag prop and setting it to div:

<transition-group name="fade" tag="div" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

[antimanada]

It worked!

Thanks very much!

[adamwathan]

Moving this to our discussions area, please reserve issues for actual Tailwind bugs or feature requests 👍🏻

[antimanada]

Ok!

Thankyou very much for your attention. It worked.