Tailwind config: Using closure to access theme function leads to invalid base style rule

[edda]

What version of Tailwind CSS are you using?
v3.0.14

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL
https://play.tailwindcss.com/adavrUyj2z?file=config

Describe your issue

When using a closure to access the theme function inside the backgroundColor section in the tailwind.config.js like so:

        theme: {  
          borderColor: ({theme}) => ({
            ...theme('colors'),
            danger: "#f00",
          }),
        }

or even without accessing theme:

        theme: {  
          borderColor: ({theme}) => ({
            danger: "#f00",
          }),
        }

the base style border-color (https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css#L12) comes out as:

        *, ::before, ::after {
          box-sizing: border-box;
          border-width: 0;
          border-style: solid;
          border-color: 'currentColor';
        }

which is ignored by the browser because it is an invalid value. Without the closure it is:

        *, ::before, ::after {
          box-sizing: border-box;
          border-width: 0;
          border-style: solid;
          border-color: currentColor;
        }

This is especially problematic if you minimize your CSS in the build step, because the minimization will turn the three separate border rules into a single rule:

   border: 0 solid 'currentColor';

The invalid color value makes the whole rule invalid which can lead to elements suddenly having borders even though you don't expect them to (this is how I found the issue ;)).

[diegohaz]

Also seeing this issue with v3.0.12. Using v3.0.11 for now.

Maybe a regression introduced by #6926? (cc @thecrypticace)

[kwypchlo]

I have exactly the same issue with "currentColor" being in quotes in my project.
https://github.com/SkynetLabs/skynet-webportal/tree/master/packages/website

Downgrading to v3.0.11 solves the issue.