Add a paragraph on breakpoint sorting (#2107)

This has been causing repeated confusion already so let's add a section
to clarify this.

Closes #2099

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>

Author: philipp-spiess

src/docs/responsive-design.mdx

@@ -324,6 +324,10 @@ This updates the `2xl` breakpoint to use `100rem` instead of the default `96rem`
 </div>
 ```
 
+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).
 
 ### Removing default breakpoints