Styled component function syntax not applying styles in correct order

[tannerlinsley]

The bug is best visible in this codesandbox reproduction: https://codesandbox.io/s/hungry-curran-m2zvw?file=/src/App.js.

Expectation: Only the "active" tab should be white in dark mode
Actual: All of the tabs are white in dark mode.

[tannerlinsley]

Another note I forgot is that seems to only happen in dark mode, but there could be deeper issues afoot in light mode that I'm just not sussing out.

[ben-rogerson]

Thanks for the great bug reproduction.

This issue looks like it's the &bug introduced in styled-components@5.2.

I can only think of these workarounds right now:

• Use css variables for theming - you can see an advanced approach here
  The idea is to set the css vars in :root or body (using the globalStyles import from styled-components), then set colors in tailwind that use those variables (eg: colors: { "primary": "var(--color-primary)" }). You can then toggle the global variable with js to change the theme.
• Drop back a version 5.1.1 in styled-components - here's your working demo
• Or switch to emotion - It doesn't have the & issues styled-components has right now.

[ben-rogerson]

Closing this as this has been covered in #310
If dropping back to styled-components 5.1 didn't solve this, feel free to re-open 👍