Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion readme.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Tailwind CSS Multi-Column Plugin

This plugin adds utilities to use all multi-column properties with Tailwind CSS.
This plugin adds utilities to use all multi-column properties with Tailwind CSS up to version 3. For v4 and up, [see below](#tailwind-4).

## Installation

Expand Down Expand Up @@ -105,6 +105,54 @@ This means you won't be able to use `@apply` with those classes. Let me know if
.col-span-all { column-span: all; }
```

## Tailwind 4

Since version 4, Tailwind underwent a significant overhaul and adding custom utilities is much easier than before thanks to it's css-first configuration system and automatic value detection. Here's what this plugin could be replaced with:

```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-*);
}
```

## Credits

This plugin was inspired by [@LoganDark](https://github.com/LoganDark) and [@codytooker](https://github.com/codytooker) discussion here: https://github.com/tailwindcss/tailwindcss/issues/540