tailwindcss icon indicating copy to clipboard operation
tailwindcss copied to clipboard

Support bare `col-*` and `row-*` utilities

Open adamwathan opened this issue 1 year ago • 0 comments

Resolves #15170.

This PR adds support for bare integer values to the col-* and row-* utilities:

.col-5 {
  grid-column: 5;
}
.row-6 {
  grid-row: 6;
}

These properties are shorthands for grid-column-start/grid-column-end and grid-row-start/grid-row-end, so using a bare integer value ends up being a shortcut for:

.col-5 {
  grid-column-start: 5;
  grid-column-end: auto;
}

…which makes these basically work like an alternative to col-start-* and row-start-*.

These support negative values like -col-6 as well, which also technically extends to arbitrary values like -col-[6/span_2] now even though that is a junk value. I've decided not to guard against that though and just consider it user error to keep the implementation simple.

adamwathan avatar Nov 25 '24 22:11 adamwathan