column-count support

[LoganDark]

I'd appreciate Tailwind utilities for working with the column-count property.

Something like .col-count-2, or something similar.

It's great for masonry layouts:

(image source)

[codytooker]

+1 to this. I just tweeted tailwindcss before coming here asking if it was something planned.

I'd be willing to take a stab at it, if it's wanted in core at all. If not I will look at making a plugin.

[codytooker]

I think the css column spec would be a good addition to the framework. Even if it is set to false by default since it is a less commonly used system.

column-count:
column-gap:
column-span:
column-rule:
column-width:

My only thought is it may produce some naming conflicts with grid-column once those get added to core depending on how they are named. But that could be discussed and figured out.

Also since these selectors are seldom used the module / modules could be set to false in the default config if need be.

[codytooker]

I submitted a pull requests that is a sort of work in progress brainstorming section for the css column specification, it can be found at #541 . If anyone has some insight in how it should be handled, head over there and leave a comment.

[LoganDark]

column-count:
column-gap:
column-span:
column-rule:
column-width:

@codytooker

.col-count
.col-gap
.col-span
.col-rule
.col-w

:)

[codytooker]

@LoganDark take a look at #541 if you look at the file changes you can see the selectors I came up with. I was trying to model most of it after the way borders are handled currently in Tailwind.

For instance Column Fill classes are the following.

.column-fill
.column-balance
.column-balance-all

And Column Rule style classes are

.column-solid
.column-dashed
.column-dotted
.column-none

With column rule color and column count following the same convention with

.column-{color}
.column-{number}

I do like the short hand .col but was concerned with how the grid implementation that I assume is coming to tailwind will be built.

[LoganDark]

@codytooker you really should use plain col.

https://tailwindcss.com/docs/flexbox-direction/#class-reference

That's the convention these guys use, and col is much more convenient and easy to type than column.

I'm pretty sure they'll use a grid prefix for CSS grid.

[codytooker]

Updated classes to use .col- instead of .column- in agreement with @LoganDark 's input.
changes can be seen at #541

[hacknug]

Hey there! In my opinion this should not be a part of core yet (not even disabled by default) but that doesn't mean it's something we don't need.

I've published a couple of plugins to NPM that would do the exact same thing your PR does plus some extra utilities related to CSS multi-columns (I've actually incorporated some of the naming conventions you discussed to what I already had before publishing).

Let me know if there's anything else you're missing here, feel free to open issues to discuss whatever and let's wait on Adam's input on this (guessing he'll pass on the PR since this is what the plugins API was built for).

• Break: https://www.npmjs.com/package/tailwindcss-break
• Multi-Column: https://www.npmjs.com/package/tailwindcss-multi-column

[adamwathan]

I think this would be better as a plugin at least for now, always can revisit later though.

"Rule #1 of open-source: no is temporary, yes is forever."

[surjithctly]

Can revisit this now as a JIT plugin?

[michalhudecek]

Yes, this would be great. It cannot be recreated with other classes.

[bw-jm]

+1

[disemio]

If you're planning to use this in ul element, Columns work just fine.

[davidwebca]

For those who need this in Tailwind v4, here's what I came up with while migrating from tailwindcss-multi-column:
https://play.tailwindcss.com/lC8MBCSicQ?file=css

@import "tailwindcss";

:root{
  --tw-column-rule-style: solid;
}

@theme {
  --column-rule-style-solid: solid;
  --column-rule-style-dashed: dashed;
  --column-rule-style-dotted: dotted;
  --column-rule-style-double: double;
  --column-rule-style-none: none;
  --column-fill-auto: auto;
  --column-fill-balance: balance;
  --column-fill-all: all;
  --column-count-span-none: none;
  --column-count-span-all: all;
}
@utility col-count-*{
  column-count: --value(integer);
}
@utility col-gap-*{
  column-gap: --spacing(--value(integer));
}
@utility col-w-*{
  column-width: --spacing(--value(integer));
}
@utility col-rule-*{
  column-rule-style: var(--tw-column-rule-style);
  column-rule-color: --value(--color);
  column-rule-width: calc(--value(integer) * 1px);
  column-rule-style: --value(--column-rule-style-*);
}
@utility col-fill-*{
  column-fill: --value(--column-fill-*);
}

/* Specific name with "col-count" prefix to avoid collision with grid-column utilities */
@utility col-span-*{
  column-span: --value(--column-count-span-*);
}

The col-gap and col-w utilities are using a soon-to-be-added special function "--spacing()" so it's currently working only on the insiders release of Tailwind, but it's already merged so it's coming soon. You can read more about it here.

** edit: --spacing() function was released already, my bad. The PR is just about displaying the suggestions!