Support JS config to overwrite breakpoints

Author: philipp-spiess

packages/tailwindcss/src/compat/apply-config-to-theme.ts

@@ -111,9 +111,8 @@ function themeableValues(config: ResolvedConfig['theme']): [string[], unknown][]
 }
 
 function keyPathToCssProperty(path: string[]) {
-  if (path[0] === 'colors') {
-    path[0] = 'color'
-  }
+  if (path[0] === 'colors') path[0] = 'color'
+  if (path[0] === 'screens') path[0] = 'breakpoint'
 
   return (
     path

packages/tailwindcss/src/compat/config.test.ts

@@ -1,4 +1,4 @@
-import { describe, test } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { compile } from '..'
 import plugin from '../plugin'
 import { flattenColorPalette } from './flatten-color-palette'
@@ -978,3 +978,65 @@ describe('default font family compatibility', () => {
     `)
   })
 })
+
+test('merges css breakpoints with js config screens', async () => {
+  let input = css`
+    @theme default {
+      --breakpoint-sm: 40rem;
+      --breakpoint-md: 48rem;
+      --breakpoint-lg: 64rem;
+      --breakpoint-xl: 80rem;
+      --breakpoint-2xl: 96rem;
+    }
+    @theme {
+      --breakpoint-md: 50rem;
+    }
+    @config "./config.js";
+    @tailwind utilities;
+  `
+
+  let compiler = await compile(input, {
+    loadConfig: async () => ({
+      theme: {
+        extend: {
+          screens: {
+            sm: '44rem',
+          },
+        },
+      },
+    }),
+  })
+
+  expect(compiler.build(['sm:flex', 'md:flex', 'lg:flex', 'min-sm:max-md:underline']))
+    .toMatchInlineSnapshot(`
+      ":root {
+        --breakpoint-md: 50rem;
+        --breakpoint-lg: 64rem;
+        --breakpoint-xl: 80rem;
+        --breakpoint-2xl: 96rem;
+      }
+      .sm\\:flex {
+        @media (width >= 44rem) {
+          display: flex;
+        }
+      }
+      .min-sm\\:max-md\\:underline {
+        @media (width >= 44rem) {
+          @media (width < 50rem) {
+            text-decoration-line: underline;
+          }
+        }
+      }
+      .md\\:flex {
+        @media (width >= 50rem) {
+          display: flex;
+        }
+      }
+      .lg\\:flex {
+        @media (width >= 64rem) {
+          display: flex;
+        }
+      }
+      "
+    `)
+})

packages/tailwindcss/src/compat/default-theme.ts

@@ -883,11 +883,11 @@ export default {
     ...barePercentages,
   },
   screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
+    sm: '40rem',
+    md: '48rem',
+    lg: '64rem',
+    xl: '80rem',
+    '2xl': '96rem',
   },
   scrollMargin: ({ theme }) => theme('spacing'),
   scrollPadding: ({ theme }) => theme('spacing'),