Add column utilities

[reinink]

This PR adds new column utilities to Tailwind CSS. By default, these utilities come in two different scales — a count scale and a width scale. Both of these scales are valid values for the columns shorthand property.

Count scale

The count utilities set the number of columns that should be created, and the column width is automatically adjusted to accommodate that number.

Class	CSS
columns-auto	columns: auto
columns-1	columns: 1
columns-2	columns: 2
columns-3	columns: 3
columns-4	columns: 4
columns-5	columns: 5
columns-6	columns: 6
columns-7	columns: 7
columns-8	columns: 8
columns-9	columns: 9
columns-10	columns: 10
columns-11	columns: 11
columns-12	columns: 12

You can use the responsive helpers to adjust the number of columns based on the screen size:

<div class="md:columns-2 lg:columns-3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Width scale

The width utilities set the ideal column width, with the number of columns (the count) automatically adjusting to accommodate that value. This "t-shirt" scale is the same as the max-width scale, with the addition of 2xs and 3xs, since smaller columns may be desirable.

Class	CSS
columns-auto	columns: auto
columns-3xs	columns: 16rem
columns-2xs	columns: 18rem
columns-xs	columns: 20rem
columns-sm	columns: 24rem
columns-md	columns: 28rem
columns-lg	columns: 32rem
columns-xl	columns: 36rem
columns-2xl	columns: 42rem
columns-3xl	columns: 48rem
columns-4xl	columns: 56rem
columns-5xl	columns: 64rem
columns-6xl	columns: 72rem
columns-7xl	columns: 80rem

Using the width scale is actually really nice, since the number of columns automatically adjusts based on the width available. Meaning you don't need to use any responsive helpers!

<div class="columns-md">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Customizing

The available utilities can be customized under the theme.columns section of your tailwind.config.js file.

These utilities also support arbitrary values, so if you need to use another value that doesn't make sense to include in your Tailwind config, you can do this using the square bracket notation:

<div class="columns-[10rem]">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Column gaps

To specify the width between columns, you can use the existing gap-x utilities in Tailwind.

<div class="columns-md gap-x-6">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Future considerations

There are number of additional CSS properties available within the column spec that this PR does not address. This includes things like column span, fill, and rule. While these might be interesting utilities to add some day, their use-case is much less common, so we've decided to leave them out for now.

[adamwathan]

@codytooker Added you as a co-author on this since you opened the first PR for this idea years ago, thank you! 👊

[codytooker]

Thanks @adamwathan, I am glad Tailwind is in a place now that this functionality makes sense in core. Good job @reinink getting this working 👍

[ralphjsmit]

Hey, I see that this was merged already into master, but looks like the utilities cannot be used yet. Is that because it is staged for V3 or am I doing something wrong? I checked that I'm on v2.2.19, so that looks to be the latest version.

Any possibility of releasing this already?😁

[reinink]

@ralphjsmit Hey there! These utilities are already available in the v3.0 alpha releases (see here and here), so you'll need to upgrade to this version if you'd like to use these utilities — they won't be available in v2.x 👍

[ralphjsmit]

Ah that's great to hear Jonathan, thanks!