[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>
This commit is contained in:
Maxwell Barvian 2024-04-09 20:04:58 -05:00 • committed by GitHub
parent ce0a7347da
commit 7347cddb9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 17 additions and 17 deletions

View file

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

View file

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

View file

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