From e3ce843aa4fc2905a9d4287f2ae46042d666285a Mon Sep 17 00:00:00 2001
From: wongjn <11310624+wongjn@users.noreply.github.com>
Date: Sun, 23 Feb 2025 13:54:16 +0000
Subject: [PATCH] Document `--breakpoint-` usage with `rem` units

---
 src/docs/adding-custom-styles.mdx     | 2 +-
 src/docs/functions-and-directives.mdx | 2 +-
 src/docs/upgrade-guide.mdx            | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/docs/adding-custom-styles.mdx b/src/docs/adding-custom-styles.mdx
index ee3b83e00..a85fd795f 100644
--- a/src/docs/adding-custom-styles.mdx
+++ b/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);
diff --git a/src/docs/functions-and-directives.mdx b/src/docs/functions-and-directives.mdx
index 877e4e8b8..5dae779ca 100644
--- a/src/docs/functions-and-directives.mdx
+++ b/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);
diff --git a/src/docs/upgrade-guide.mdx b/src/docs/upgrade-guide.mdx
index d1749d4bb..a1bad9fb8 100644
--- a/src/docs/upgrade-guide.mdx
+++ b/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);