From 225910b75d60483c6ac7439fe0f7879305b9316f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 21 Feb 2025 11:21:28 +0100 Subject: [PATCH 1/2] Breakpoint sorting --- src/docs/responsive-design.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/docs/responsive-design.mdx b/src/docs/responsive-design.mdx index e1c8973a2..c25718eb8 100644 --- a/src/docs/responsive-design.mdx +++ b/src/docs/responsive-design.mdx @@ -324,6 +324,8 @@ This updates the `2xl` breakpoint to use `100rem` instead of the default `96rem` ``` +Utilities using these breakpoints are automatically sorted based on the value of the breakpoint, as long as the units match. + Learn more about customizing your theme in the [theme documentation](/docs/theme). ### Removing default breakpoints From 594ee63150244844d4bb0184649882ee420b866a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 21 Feb 2025 11:29:58 -0500 Subject: [PATCH 2/2] Update src/docs/responsive-design.mdx --- src/docs/responsive-design.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/docs/responsive-design.mdx b/src/docs/responsive-design.mdx index c25718eb8..86f373638 100644 --- a/src/docs/responsive-design.mdx +++ b/src/docs/responsive-design.mdx @@ -324,7 +324,9 @@ This updates the `2xl` breakpoint to use `100rem` instead of the default `96rem` ``` -Utilities using these breakpoints are automatically sorted based on the value of the breakpoint, as long as the units match. +Note that it's important to always use the same unit for defining your breakpoints or the generated utilities may be sorted in an unexpected order, causing breakpoint classes to override each other in unexpected ways. + +Tailwind uses `rem` for the default breakpoints, so if you are adding additional breakpoints to the defaults, make sure you use `rem` as well. Learn more about customizing your theme in the [theme documentation](/docs/theme).