Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Extending multiple color plugins using the same color name causes incorrect colors.
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

3.0.2

**What build tool (or framework if it abstracts the build tool) are you using?**

Playground

**What version of Node.js are you using?**

n/a

**What browser are you using?**

n/a

**What operating system are you using?**

n/a

**Reproduction URL**

https://play.tailwindcss.com/v7qgUeljBK?file=config

**Describe your issue**

Extending multiple color plugins using the same color name causes incorrect colors.

See https://play.tailwindcss.com/v7qgUeljBK?file=config for a failing case.

It works when using the same name multiple times directly https://play.tailwindcss.com/qaS9VP8AHE?file=config 


Hints:
I would like to work on this, can you assign to me?

Patch:
diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -6,6 +6,8 @@ import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
 import { normalizeConfig } from './normalizeConfig'
+import isPlainObject from './isPlainObject'
+import { cloneDeep } from './cloneDeep'
 
 function isFunction(input) {
   return typeof input === 'function'
@@ -144,7 +146,15 @@ function resolveFunctionKeys(object) {
       val = isFunction(val) ? val(resolvePath, configUtils) : val
     }
 
-    return val === undefined ? defaultValue : val
+    if (val === undefined) {
+      return defaultValue
+    }
+
+    if (isPlainObject(val)) {
+      return cloneDeep(val)
+    }
+
+    return val
   }
 
   resolvePath.theme = resolvePath


Test patch:
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -57,3 +57,55 @@ test('all plugins are executed that match a candidate', () => {
     `)
   })
 })
+
+test('per-plugin colors with the same key can differ when using a custom colors object', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="bg-theme text-theme">This should be green text on red background.</div>
+        `,
+      },
+    ],
+    theme: {
+      // colors & theme MUST be plain objects
+      // If they're functions here the test passes regardless
+      colors: {
+        theme: {
+          bg: 'red',
+          text: 'green',
+        },
+      },
+      extend: {
+        textColor: {
+          theme: {
+            DEFAULT: 'green',
+          },
+        },
+        backgroundColor: {
+          theme: {
+            DEFAULT: 'red',
+          },
+        },
+      },
+    },
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-theme {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+      }
+      .text-theme {
+        --tw-text-opacity: 1;
+        color: rgb(0 128 0 / var(--tw-text-opacity));
+      }
+    `)
+  })
+})