From aa22407c36c4c46d4ae9375fc27e563d31c2d860 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 17 Feb 2025 15:31:32 +0100 Subject: [PATCH 1/4] Improve upgrade guide --- src/docs/functions-and-directives.mdx | 2 +- src/docs/upgrade-guide.mdx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/docs/functions-and-directives.mdx b/src/docs/functions-and-directives.mdx index 877e4e8b8..ed1a5d26c 100644 --- a/src/docs/functions-and-directives.mdx +++ b/src/docs/functions-and-directives.mdx @@ -252,7 +252,7 @@ Use the `@config` directive to load a legacy JavaScript-based configuration file @config "../../tailwind.config.js"; ``` -The `corePlugins`, `safelist` and `separator` options from the JavaScript-based config are not supported in v4.0. +The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0.

@plugin

diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index d1749d4bb..22961a7ff 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -595,7 +595,7 @@ The generated CSS variables _will_ include a prefix to avoid conflicts with any ### Adding custom utilities -In v3, any custom classes you defined within `@layer utilities` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg`. +In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg`. In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement: @@ -725,6 +725,8 @@ If you still need to use a JavaScript config file, you can load it explicitly us @config "../../tailwind.config.js"; ``` +The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. + ### Theme values in JavaScript In v3 we exported a `resolveConfig` function that you could use to turn your JavaScript-based config into a flat object that you could use in your other JavaScript. From a81ccfb5c92152f64134c3ba9dd977cca872f6a8 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 17 Feb 2025 18:20:11 +0100 Subject: [PATCH 2/4] Updates --- src/docs/upgrade-guide.mdx | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 22961a7ff..ad49c9418 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -595,12 +595,23 @@ The generated CSS variables _will_ include a prefix to avoid conflicts with any ### Adding custom utilities -In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg`. +In v3, any custom classes you defined within `@layer utilities` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet. In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement: ```css /* [!code filename:CSS] */ +@layer components { + .btn { + border-radius: 0.5rem; + padding: 0.5rem 1rem; + background-color: ButtonFace; + } +} +/* [!code ++:4] */ +@utility tab-4 { + tab-size: 4; +} /* [!code --:6] */ @layer utilities { .tab-4 { @@ -613,6 +624,26 @@ In v4 we are using native cascade layers and no longer hijacking the `@layer` at } ``` +In v4, custom utilities are sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration: + +```css +/* [!code filename:CSS] */ +/* [!code --:8] */ +@layer components { + .btn { + border-radius: 0.5rem; + padding: 0.5rem 1rem; + background-color: ButtonFace; + } +} +/* [!code ++:6] */ +@utility btn { + border-radius: 0.5rem; + padding: 0.5rem 1rem; + background-color: ButtonFace; +} +``` + Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities). ### Variant stacking order From bd8f02955023865abb2ec7c71ebefbbe1b6338d9 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 17 Feb 2025 18:20:37 +0100 Subject: [PATCH 3/4] mb --- src/docs/upgrade-guide.mdx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index ad49c9418..c58158bf8 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -601,17 +601,6 @@ In v4 we are using native cascade layers and no longer hijacking the `@layer` at ```css /* [!code filename:CSS] */ -@layer components { - .btn { - border-radius: 0.5rem; - padding: 0.5rem 1rem; - background-color: ButtonFace; - } -} -/* [!code ++:4] */ -@utility tab-4 { - tab-size: 4; -} /* [!code --:6] */ @layer utilities { .tab-4 { From b0fb97e40f32b18be7396f343dc440732da78408 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 17 Feb 2025 18:21:44 +0100 Subject: [PATCH 4/4] mb --- src/docs/upgrade-guide.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index c58158bf8..ffa488aab 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -595,7 +595,7 @@ The generated CSS variables _will_ include a prefix to avoid conflicts with any ### Adding custom utilities -In v3, any custom classes you defined within `@layer utilities` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet. +In v3, any custom classes you defined within `@layer utilities` or `@layer components` would get picked up by Tailwind as a true utility class and would automatically work with variants like `hover`, `focus`, or `lg` with the difference being that `@layer components` would always come first in the generated stylesheet. In v4 we are using native cascade layers and no longer hijacking the `@layer` at-rule, so we've introduced the `@utility` API as a replacement: @@ -613,7 +613,7 @@ In v4 we are using native cascade layers and no longer hijacking the `@layer` at } ``` -In v4, custom utilities are sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration: +Custom utilities are now also sorted based on the amount of properties they define. This means that component utilities like this `.btn` can be overwritten by other Tailwind utilities without additional configuration: ```css /* [!code filename:CSS] */