Add array length possibilities

Author: wongjn

integrations/upgrade/js-config.test.ts

@@ -38,6 +38,8 @@ test(
               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',
@@ -191,6 +193,9 @@ test(
         --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,10 +52,9 @@ test('config values can be merged into the theme', () => {
                 lineHeight: '1.5',
               },
             ],
-            lg: [
-              '1.125rem',
-              '2',
-            ],
+            lg: ['1.125rem', '2'],
+            xl: ['1.5rem', '3rem', 'invalid'],
+            '2xl': ['2rem'],
           },
 
           letterSpacing: {
@@ -111,6 +110,16 @@ test('config values can be merged into the theme', () => {
     '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

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