Support arrays in JS config values (#14343)

This PR fixes a small bug where theme values could not be defined as
arrays in JS config files, for example:

```js
export default {
  theme: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
    },
  },
}
```

---------

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

Author: adamwathan

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure theme values overridden with `reference` values don't generate stale CSS variables ([#14327](https://github.com/tailwindlabs/tailwindcss/pull/14327))
 - Don’t suggest named opacity modifiers in intellisense ([#14339](https://github.com/tailwindlabs/tailwindcss/pull/14339))
 - Fix a crash with older Node.js versions ([#14342](https://github.com/tailwindlabs/tailwindcss/pull/14342))
+- Support defining theme values as arrays of strings in JS config files ([#14343](https://github.com/tailwindlabs/tailwindcss/pull/14343))
 
 ## [4.0.0-alpha.21] - 2024-09-02
 

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

@@ -18,6 +18,11 @@ test('Config values can be merged into the theme', ({ expect }) => {
             },
           },
 
+          fontFamily: {
+            sans: ['Inter', 'system-ui', 'sans-serif'],
+            mono: ['Potato Mono', { fontVariationSettings: '"XHGT" 0.7' }],
+          },
+
           fontSize: {
             sm: '0.875rem',
             base: [
@@ -34,6 +39,11 @@ test('Config values can be merged into the theme', ({ expect }) => {
 
   expect(theme.resolve('primary', ['--color'])).toEqual('#c0ffee')
   expect(theme.resolve('red-500', ['--color'])).toEqual('red')
+  expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif')
+  expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([
+    'Potato Mono',
+    { '--font-variation-settings': '"XHGT" 0.7' },
+  ])
   expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
   expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
   expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([

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

@@ -37,6 +37,11 @@ function themeableValues(config: ResolvedConfig['theme']): [string[], unknown][]
 
       return WalkAction.Skip
     }
+
+    if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
+      toAdd.push([path, value.join(', ')])
+      return WalkAction.Skip
+    }
   })
 
   return toAdd