From 7347cddb9ab17786e892e4e8744d2358ac05363f Mon Sep 17 00:00:00 2001
From: Maxwell Barvian <max@barvian.me>
Date: Tue, 9 Apr 2024 20:04:58 -0500
Subject: [PATCH] [v4] Switch default breakpoints to rem (#13469)

* Switch breakpoints to rem #8378

* Fix broken test

* Update snapshots

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 .../src/__snapshots__/index.test.ts.snap             | 12 ++++++------
 .../tailwindcss/src/__snapshots__/index.test.ts.snap | 12 ++++++------
 packages/tailwindcss/theme.css                       | 10 +++++-----
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
index 2378be457..e8848e86c 100644
--- a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -11,11 +11,11 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --default-mono-font-family: var(--font-family-mono);
     --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
     --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-    --breakpoint-sm: 640px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 1024px;
-    --breakpoint-xl: 1280px;
-    --breakpoint-2xl: 1536px;
+    --breakpoint-sm: 40rem;
+    --breakpoint-md: 48rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-xl: 80rem;
+    --breakpoint-2xl: 96rem;
     --color-black: #000;
     --color-white: #fff;
     --color-slate-50: #f8fafc;
@@ -599,7 +599,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     text-decoration-line: underline;
   }
 
-  @media (width >= 1536px) {
+  @media (width >= 96rem) {
     .\\32 xl\\:font-bold {
       font-weight: 700;
     }
diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
index 7eaf27dd9..969f22c13 100644
--- a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -10,11 +10,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --default-mono-font-family: var(--font-family-mono);
   --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
   --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
   --color-black: #000;
   --color-white: #fff;
   --color-slate-50: #f8fafc;
@@ -417,7 +417,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-@media (width >= 640px) {
+@media (width >= 40rem) {
   .sm\\:flex {
     display: flex;
   }
diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
index 2028f4da5..374398718 100644
--- a/packages/tailwindcss/theme.css
+++ b/packages/tailwindcss/theme.css
@@ -10,11 +10,11 @@
   --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
 
   /* Breakpoints */
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-2xl: 1536px;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
 
   /* Colors */
   --color-black: #000;