Tailwind config: Using closure to access theme function leads to invalid base style rule #7186
Description
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 ;)).