Document --breakpoint- usage with rem units (#2108)

Follow up to #2107.

Please note there are still instances in of `px` usage in the v4-alpha
and v4 blog posts, wasn't sure whether those should be changed too, or
preserved for prosperity.

Author: wongjn

src/docs/adding-custom-styles.mdx

@@ -16,7 +16,7 @@ If you want to change things like your color palette, spacing scale, typography
 @theme {
   --font-display: "Satoshi", "sans-serif";
 
-  --breakpoint-3xl: 1920px;
+  --breakpoint-3xl: 120rem;
 
   --color-avocado-100: oklch(0.99 0 0);
   --color-avocado-200: oklch(0.98 0.04 113.22);

src/docs/functions-and-directives.mdx

@@ -25,7 +25,7 @@ Use the `@theme` directive to define your project's custom design tokens, like f
 @theme {
   --font-display: "Satoshi", "sans-serif";
 
-  --breakpoint-3xl: 1920px;
+  --breakpoint-3xl: 120rem;
 
   --color-avocado-100: oklch(0.99 0 0);
   --color-avocado-200: oklch(0.98 0.04 113.22);

src/docs/upgrade-guide.mdx

@@ -567,7 +567,7 @@ When using a prefix, you should still configure your theme variables as if you a
 @theme {
   --font-display: "Satoshi", "sans-serif";
 
-  --breakpoint-3xl: 1920px;
+  --breakpoint-3xl: 120rem;
 
   --color-avocado-100: oklch(0.99 0 0);
   --color-avocado-200: oklch(0.98 0.04 113.22);
@@ -583,7 +583,7 @@ The generated CSS variables _will_ include a prefix to avoid conflicts with any
 :root {
   --tw-font-display: "Satoshi", "sans-serif";
 
-  --tw-breakpoint-3xl: 1920px;
+  --tw-breakpoint-3xl: 120rem;
 
   --tw-color-avocado-100: oklch(0.99 0 0);
   --tw-color-avocado-200: oklch(0.98 0.04 113.22);