From 85864034b07260ee426296482668a0e8cace2182 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 12:01:03 +0100 Subject: [PATCH 1/3] Upgrade guide changes --- src/docs/upgrade-guide.mdx | 58 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 91de29a8f..43a80cd22 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -478,6 +478,64 @@ If you'd like to continue using `cursor: pointer` by default, add these base sty } ``` +#### Dialog margins removed + +`` elements now have their margin reset. If you want to preserve the v3 behavior, add this CSS to your project: + +```css +/* [!code filename:CSS] */ +@layer base { + dialog { + margin: auto; + } +} +``` + +### Using a prefix + +Prefixes now look like variants and are always at the beginning of the class name: + +```html + +
+ +
+``` + +When using a prefix, you should still configure your theme variables as if you aren't using a prefix: + +```css {{ filename: "app.css" }} +@import "tailwindcss" prefix(tw); + +@theme { + --font-display: "Satoshi", "sans-serif"; + + --breakpoint-3xl: 1920px; + + --color-avocado-100: oklch(0.99 0 0); + --color-avocado-200: oklch(0.98 0.04 113.22); + --color-avocado-300: oklch(0.94 0.11 115.03); + + /* ... */ +} +``` + +The generated CSS variables _will_ include a prefix though to avoid conflicts with any existing variables in your project: + +```css {{ filename: "dist.css" }} +:root { + --tw-font-display: "Satoshi", "sans-serif"; + + --tw-breakpoint-3xl: 1920px; + + --tw-color-avocado-100: oklch(0.99 0 0); + --tw-color-avocado-200: oklch(0.98 0.04 113.22); + --tw-color-avocado-300: oklch(0.94 0.11 115.03); + + /* ... */ +} +``` + ### 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`. From 913cda47a9f02a5f16373ee09fb934f12a527a57 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 12:09:52 +0100 Subject: [PATCH 2/3] Mention `space-x-*` and `space-y-*` changes --- src/docs/upgrade-guide.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index 43a80cd22..e5d67f654 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -365,6 +365,20 @@ To update your project for this change, replace any usage of `ring` with `ring-3 ``` +#### Updated space-x-\* and space-y-\* utilities + +The [`space-x-*` and `space-y-*` utilities](/docs/margin#adding-space-between-children) now use an updated selector that adds a margin to all but the last elements. If this change causes any issues, we recommend to migrate to a flex or grid layout and use `gap` instead: + +{/* prettier-ignore */} +```html + +
+
+ + +
+``` + ### Container configuration In v3, the `container` utility had several configuration options like `center` and `padding` that no longer exist in v4. From 24b5e3fd3101c95698d7c6f260da59ad7cdc16fc Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 11 Feb 2025 16:17:29 -0500 Subject: [PATCH 3/3] Tweaks --- src/docs/upgrade-guide.mdx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx index e5d67f654..90136d4e8 100644 --- a/src/docs/upgrade-guide.mdx +++ b/src/docs/upgrade-guide.mdx @@ -365,9 +365,26 @@ To update your project for this change, replace any usage of `ring` with `ring-3 ``` -#### Updated space-x-\* and space-y-\* utilities +### Space-between selector -The [`space-x-*` and `space-y-*` utilities](/docs/margin#adding-space-between-children) now use an updated selector that adds a margin to all but the last elements. If this change causes any issues, we recommend to migrate to a flex or grid layout and use `gap` instead: +We've changed the selector used by the [`space-x-*` and `space-y-*` utilities](/docs/margin#adding-space-between-children) to address serious performance issues on large pages: + +```css +/* [!code filename:CSS] */ +/* Before */ +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + margin-top: 1rem; +} + +/* Now */ +.space-y-4 > :not(:last-child) { + margin-bottom: 1rem; +} +``` + +You might see changes in your project if you were ever using these utilities with inline elements, or if you were adding other margins to child elements to tweak their spacing. + +If this change causes any issues in your project, we recommend migrating to a flex or grid layout and using `gap` instead: {/* prettier-ignore */} ```html @@ -494,7 +511,9 @@ If you'd like to continue using `cursor: pointer` by default, add these base sty #### Dialog margins removed -`` elements now have their margin reset. If you want to preserve the v3 behavior, add this CSS to your project: +Preflight now resets margins on `` elements to be consistent with how other elements are reset. + +If you still want dialogs to be centered by default, add this CSS to your project: ```css /* [!code filename:CSS] */ @@ -534,7 +553,7 @@ When using a prefix, you should still configure your theme variables as if you a } ``` -The generated CSS variables _will_ include a prefix though to avoid conflicts with any existing variables in your project: +The generated CSS variables _will_ include a prefix to avoid conflicts with any existing variables in your project: ```css {{ filename: "dist.css" }} :root {