Package Exports
- @konnng/tailwind-content-column
- @konnng/tailwind-content-column/src/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@konnng/tailwind-content-column) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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-columnThen 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,colRuleStyleandcolSpan, 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-smcol-rule-secondarycol-rule-width-pxcol-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>