col-span-* classes generate unclear css declarations

[sgurukrupa]

As summarised in the title, col-span-* seem to be generating css declarations that don't seem to be making sense. Please correct me if I have understood it wrong. For example, col-span-2, generates the following css:

.col-span-2 { grid-column:span 2 / span 2; }
As per the CSS specs, the value before the slash ('/') is the grid-column-start value and the one after the slash is the grid-column-end value. In the above case, both specify a span value. Is this correct CSS?

[wongjn]

It is correct CSS. I believe it is so that you can combine the col-span-* values with col-start-* or col-end-*:

Classes	Resolved value
col-span-2	span 2 / span 2
col-span-2 col-start-1	1 / span 2
col-span-2 col-end-1	span 2 / 1

[adamwathan]

Yep this is the answer 👍

[sgurukrupa]

Thanks for explaining why TailwindCSS is generating those CSS declarations.