search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
81.94k stars 4.14k forks source link

[v4] `col-span-*` overrides `col-start-*`. Same with `row-*` #14399

Closed sntran closed 6 days ago

sntran commented 6 days ago

What version of Tailwind CSS are you using?

v4.0.0-alpha.23

What build tool (or framework if it abstracts the build tool) are you using?

@tailwindcss/cli v4.0.0-alpha.23

What version of Node.js are you using?

v20.12.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/GDjchJ2qm2

Describe your issue

When using col-span-* with breakpoint variants, Tailwind v4 would set grid-column: span x / span x, which overrides any col-start-* defined on the same element.

As indicated in the playground, col-start-6 col-span-3 md:col-span-6 on the second <li> would put it right next to the first <li> on md, even though it should start at 6.

adamwathan commented 6 days ago

Hey! This has always been the case I'm afraid, same behavior in v3. Responsive utilities always come later in the CSS than base utilities, and since the col-span-* utilities define both a start and end value, the start/end value needs to be specified again if you change the span at a different breakpoint.

One workaround in your case would be to use col-end-[span_6] instead of col-span-6, so that you are preserving the starting column:

https://play.tailwindcss.com/phq4xeAHdl

Going to close this one as it stands as this is expected behavior currently.

adamwathan commented 5 days ago

(Might have an idea for making this work that I'm gonna hack on this afternoon anyways 🫣)

sntran commented 5 days ago

Thanks for the explanation! Should it be possible to use custom properties like the way we use transform utilities?

adamwathan commented 5 days ago

@sntran Hacked on this for a minute but very stumped by this one:

<div class="col-start-2 col-end-4 lg:col-span-6">

What do you think should happen here at the lg breakpoint?

sntran commented 5 days ago

@adamwathan

I see the conflict there.

A grid cell must start from a position, so in this case, I would consider that it still starts as line 2, and spans 6, which ends at line 9.

Of course, I don't expect the user using col-end-4 to also use lg:col-span-6. Rather, they would use lg:col-end-9.