Installation

# Install using pnpmpnpm install --save-dev tailwindcss-multi-column# Install using npmnpm install --save-dev tailwindcss-multi-column# Install using yarnyarn add -D tailwindcss-multi-column

Usage

// tailwind.config.js{theme:{// defaults to these valuescolumnCount:[1,2,3],columnGap:{// will fallback to 'gap' || 'gridGap' values// sm: '1rem',// md: '1.5rem',// lg: '2rem',},columnWidth:{// sm: '120px',// md: '240px',// lg: '360px',},columnRuleColor:false,// will fallback to `borderColor` valuescolumnRuleWidth:false,// will fallback to `borderWidth` valuescolumnRuleStyle:['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset',],columnFill:['auto','balance','balance-all'],columnSpan:['none','all'],},variants:{// all the following default to ['responsive']columnCount:['responsive'],columnGap:['responsive'],columnWidth:['responsive'],columnRuleColor:['responsive'],columnRuleWidth:['responsive'],columnRuleStyle:['responsive'],columnFill:['responsive'],columnSpan:['responsive'],},plugins:[require('tailwindcss-multi-column')(),// no options to configure],}

.col-count-1 {column-count:1; }.col-count-2 {column-count:2; }.col-count-3 {column-count:3; }.col-gap-sm {column-gap:1rem; }.col-gap-md {column-gap:1.5rem; }.col-gap-lg {column-gap:2rem; }.col-w-sm {column-width:120px; }.col-w-md {column-width:240px; }.col-w-lg {column-width:360px; }.col-rule-red {column-rule-color: red; }.col-rule-lime {column-rule-color: lime; }.col-rule-blue {column-rule-color: blue; }.col-rule {column-rule-width:1px; }.col-rule-sm {column-rule-width:2px; }.col-rule-md {column-rule-width:4px; }.col-rule-none {column-rule-style: none; }.col-rule-hidden {column-rule-style: hidden; }.col-rule-dotted {column-rule-style: dotted; }.col-rule-dashed {column-rule-style: dashed; }.col-rule-solid {column-rule-style: solid; }.col-rule-double {column-rule-style: double; }.col-rule-groove {column-rule-style: groove; }.col-rule-ridge {column-rule-style: ridge; }.col-rule-inset {column-rule-style: inset; }.col-rule-outset {column-rule-style: outset; }.col-fill-auto {column-fill: auto; }.col-fill-balance {column-fill: balance; }.col-fill-balance-all {column-fill: balance-all; }.col-span-none {column-span: none; }.col-span-all {column-span: all; }

Credits