Fix fontSize array upgrade (#17630)

Fixes #17622.

Adds a specific handling case in `themeableValues()` in
`packages/tailwindcss/src/compat/apply-config-to-theme.ts`. It seems
like this has unique handling in v3 for an array value, whereby the
second value is treated as a `line-height`.

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: wongjn

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562))
 - Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591))
 - Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628))
+- Ensure compatibility with array tuples used in `fontSize` JS theme keys ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
+- Upgrade: Convert `fontSize` array tuple syntax to CSS theme variables ([#17630](https://github.com/tailwindlabs/tailwindcss/pull/17630))
 
 ## [4.1.3] - 2025-04-04
 

integrations/upgrade/js-config.test.ts

@@ -37,6 +37,9 @@ test(
               xs: ['0.75rem', { lineHeight: '1rem' }],
               sm: ['0.875rem', { lineHeight: '1.5rem' }],
               base: ['1rem', { lineHeight: '2rem' }],
+              lg: ['1.125rem', '2.5rem'],
+              xl: ['1.5rem', '3rem', 'invalid'],
+              '2xl': ['2rem'],
             },
             width: {
               px: '1px',
@@ -188,6 +191,11 @@ test(
         --text-sm--line-height: 1.5rem;
         --text-base: 1rem;
         --text-base--line-height: 2rem;
+        --text-lg: 1.125rem;
+        --text-lg--line-height: 2.5rem;
+        --text-xl: 1.5rem;
+        --text-xl--line-height: 3rem;
+        --text-2xl: 2rem;
 
         --width-*: initial;
         --width-0: 0%;

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

@@ -52,6 +52,9 @@ test('config values can be merged into the theme', () => {
                 lineHeight: '1.5',
               },
             ],
+            lg: ['1.125rem', '2'],
+            xl: ['1.5rem', '3rem', 'invalid'],
+            '2xl': ['2rem'],
           },
 
           letterSpacing: {
@@ -102,6 +105,21 @@ test('config values can be merged into the theme', () => {
     '1rem',
     { '--line-height': '1.5' },
   ])
+  expect(theme.resolve('lg', ['--text'])).toEqual('1.125rem')
+  expect(theme.resolveWith('lg', ['--text'], ['--line-height'])).toEqual([
+    '1.125rem',
+    { '--line-height': '2' },
+  ])
+  expect(theme.resolve('xl', ['--text'])).toEqual('1.5rem')
+  expect(theme.resolveWith('xl', ['--text'], ['--line-height'])).toEqual([
+    '1.5rem',
+    { '--line-height': '3rem' },
+  ])
+  expect(theme.resolve('2xl', ['--text'])).toEqual('2rem')
+  expect(theme.resolveWith('2xl', ['--text'], ['--line-height'])).toEqual([
+    '2rem',
+    {},
+  ])
   expect(theme.resolve('super-wide', ['--tracking'])).toEqual('0.25em')
   expect(theme.resolve('super-loose', ['--leading'])).toEqual('3')
   expect(theme.resolve('1/2', ['--width'])).toEqual('60%')

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

@@ -130,7 +130,16 @@ export function themeableValues(config: ResolvedConfig['theme']): [string[], unk
     }
 
     if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
-      toAdd.push([path, value.join(', ')])
+      if (path[0] === 'fontSize') {
+        toAdd.push([path, value[0]])
+
+        if (value.length >= 2) {
+          toAdd.push([[...path, '-line-height'], value[1]])
+        }
+      } else {
+        toAdd.push([path, value.join(', ')])
+      }
+
       return WalkAction.Skip
     }
   })