diff --git a/__tests__/resolveConfig.test.js b/__tests__/resolveConfig.test.js
index e7a728d6922d..b36f8c8c0149 100644
--- a/__tests__/resolveConfig.test.js
+++ b/__tests__/resolveConfig.test.js
@@ -810,7 +810,7 @@ test('theme values in the extend section can extend values that are depended on
   })
 })
 
-test('theme values in the extend section are not deeply merged', () => {
+test('theme values in the extend section are not deeply merged when they are simple arrays', () => {
   const userConfig = {
     theme: {
       extend: {
@@ -856,6 +856,76 @@ test('theme values in the extend section are not deeply merged', () => {
   })
 })
 
+test('theme values in the extend section are deeply merged, when they are arrays of objects', () => {
+  const userConfig = {
+    theme: {
+      extend: {
+        typography: {
+          ArrayArray: {
+            css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+          },
+          ObjectArray: {
+            css: { a: { backgroundColor: 'red' } },
+          },
+          ArrayObject: {
+            css: [{ a: { backgroundColor: 'red' } }, { a: { color: 'green' } }],
+          },
+        },
+      },
+    },
+  }
+
+  const defaultConfig = {
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      typography: {
+        ArrayArray: {
+          css: [{ a: { underline: 'none' } }],
+        },
+        ObjectArray: {
+          css: [{ a: { underline: 'none' } }],
+        },
+        ArrayObject: {
+          css: { a: { underline: 'none' } },
+        },
+      },
+    },
+    variants: {},
+  }
+
+  const result = resolveConfig([userConfig, defaultConfig])
+
+  expect(result).toMatchObject({
+    prefix: '-',
+    important: false,
+    separator: ':',
+    theme: {
+      typography: {
+        ArrayArray: {
+          css: [
+            { a: { underline: 'none' } },
+            { a: { backgroundColor: 'red' } },
+            { a: { color: 'green' } },
+          ],
+        },
+        ObjectArray: {
+          css: [{ a: { underline: 'none' } }, { a: { backgroundColor: 'red' } }],
+        },
+        ArrayObject: {
+          css: [
+            { a: { underline: 'none' } },
+            { a: { backgroundColor: 'red' } },
+            { a: { color: 'green' } },
+          ],
+        },
+      },
+    },
+    variants: {},
+  })
+})
+
 test('the theme function can use a default value if the key is missing', () => {
   const userConfig = {
     theme: {
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 4c23e7104b75..774512fdb448 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -75,8 +75,18 @@ function mergeExtensionCustomizer(merged, value) {
     return merged.concat(value)
   }
 
+  // When the incoming value is an array, and the existing config is an object, prepend the existing object
+  if (Array.isArray(value) && isPlainObject(head(value)) && isPlainObject(merged)) {
+    return [merged, ...value]
+  }
+
   // Override arrays (for example for font-families, box-shadows, ...)
-  if (Array.isArray(value)) return value
+  if (Array.isArray(value)) {
+    return value
+  }
+
+  // Execute default behaviour
+  return undefined
 }
 
 function mergeExtensions({ extend, ...theme }) {