From f428036e221c3e7347e4ea76d9f5f01da4f593c9 Mon Sep 17 00:00:00 2001 From: David Lapointe Gilbert Date: Thu, 27 Mar 2025 17:07:04 -0400 Subject: [PATCH 1/2] Add details for Tailwind v4 support Tailwind v4 is now much easier to customize with its css-first configuration and automatic value detection. In this pull request, I simply suggest the addition of a specific section in the readme to explain to users, possibly coming here to upgrade a legacy project, how to add equivalent utilities by hand. --- readme.md | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index b56679f..ea000e3 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,56 @@ 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-*); +} +``` + +Note that this is only possible starting from v4.0.18 since the "--spacing()" special function was added [here](https://github.com/tailwindlabs/tailwindcss/pull/17308). + ## 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 From d29816272876ab0b31afed3b905961c5f1073ead Mon Sep 17 00:00:00 2001 From: David Lapointe Gilbert Date: Thu, 27 Mar 2025 17:16:51 -0400 Subject: [PATCH 2/2] Removing notice. The --spacing() function was already released. The PR I found was only about displaying value suggestions correctly, but the generated CSS was already correct and functional since v4.0.0 released. --- readme.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/readme.md b/readme.md index ea000e3..b671b7f 100644 --- a/readme.md +++ b/readme.md @@ -153,8 +153,6 @@ Since version 4, Tailwind underwent a significant overhaul and adding custom uti } ``` -Note that this is only possible starting from v4.0.18 since the "--spacing()" special function was added [here](https://github.com/tailwindlabs/tailwindcss/pull/17308). - ## 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