diff --git a/readme.md b/readme.md index b56679f..b671b7f 100644 --- a/readme.md +++ b/readme.md @@ -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 @@ -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