@konnng/tailwind-content-column

@konnng/tailwind-content-column

A plugin that provides support to content columns on Tailwind.

Supports the following CSS Properties:

• https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-span
• https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

Installation

Install the plugin from npm:

npm install -D @konnng/tailwind-content-column

Then add the plugin to your tailwind.config.js file.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [
    require('@konnng/tailwind-content-column'),
    // ...
  ],
};

Available theme configuration

{
  colCount: {},
  colFill: {},
  colGap: {},
  colRuleColor: {},
  colRuleStyle: {},
  colRuleWidth: {},
  colSpan: {},
  colWidth: {},
}

Note It is not recommended to change colFill, colRuleStyle and colSpan, since both use their own values from CSS specification.

Example:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colCount: {
        sm: '425px',
        //...
      },
      colRuleColor: {
        secondary: '#c6c6c6',
        //...
      },
      colRuleWidth: {
        px: '1px',
      },
      colWidth: {
        xs: '120px',
      },
    },
  },
  plugins: [
    require('@konnng/tailwind-content-column'),
    // ...
  ],
};

The above configuration will generate the following classes:

• col-count-sm
• col-rule-secondary
• col-rule-width-px
• col-width-xs

Available class utilities

Utility	CSS property	Description
col-count-[SIZE]	column-count: [SIZE];	Sizes from tailwind column config doc
col-fill-[VALUE]	column-fill: [VALUE];	Available values doc
col-gap-[SIZE]	column-gap: [SIZE];	Sizes from tailwind gap config doc
col-rule-[COLOR]	column-rule-color: [COLOR];	Colors from tailwind color config doc
col-rule-[STYLE]	column-rule-style: [STYLE];	Available styles doc
col-rule-[SIZE]	column-rule-width: [SIZE];	sizes from tailwind border config doc
col-span-[VALUE]	column-span: [VALUE];	Available values doc
col-width-[SIZE]	column-width: [SIZE];	Sizes from tailwind width config doc

Usage

Set content column to 2 and with a gap between columns.

<p class="col-count-2 col-gap-4">
  This is a bunch of text split into two columns using the CSS
  <code>column-count</code>
  property. The text is equally distributed over the columns.
</p>