How can I set column-rule-style|column-rule-width|column-rule-col for column layout in tailwind ?

[joisun]

I‘m trying use Column Layout with tailwind, but I did not find where the document mentioned about related properties.
How can I set column-rule-style|column-rule-width|column-rule-col for column layout in tailwind ?

[wongjn]

You could use arbitrary property classes like [column-rule-style:value] or you could use a plugin to create class utilities.

[kachkaev]

Out of curiosity, what prevents TailwindCSS from supporting these fields? The syntax would be the same as for outline-*.

[column-rule-color:#ff0000]
[column-rule-style:dotted]
[column-rule-width:4px]
↓
column-rule-[#ff0000]
column-rule-dotted
column-rule-4

[rozsazoltan]

@kachkaev In the meantime, you can implement them into your own projects.

@utility column-rule-* {
  column-rule-color: --value(--column-rule-color-*, --color-*, [color]);
  column-rule-style: --value("hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset");
  column-rule-width: --spacing(--value(integer));
  column-rule-width: --value([length]);
}

• https://play.tailwindcss.com/psMIBcpuEW

[kachkaev]

Looks very neat, thank you for sharing!

Still wondering if there are any fundamental blockers to including these utilities into TailwindCSS core. Column rule CSS properties are widely available.