[v4] Switch default breakpoints to rem (#13469)

* Switch breakpoints to rem #8378

* Fix broken test

* Update snapshots

---------

Co-authored-by: Adam Wathan <[email protected]>

Author: barvian

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;
     }

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;
   }

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;