Hover background color for button not working in production build when value is passed as a template literal

[mattalco]

Describe the problem:

I have created a banner component in a personal project that contains a button. I pass in variable values for the button's background color, background color on hover, and text color. In a production build, I've noticed the hover color does not work - hovering has no effect on the background color.

Without knowing much about tailwind's internal CSS process, it would appear some optimization or tree-shaking is removing the necessary hover styles (but non-hover seems to work ok). I am lead to this because changing the color red in this example to blue where it's used elsewhere doesn't reproduce the issue.

Link to a minimal reproduction:

I used the tailwind blog code as the base for this reproduction. You can find the repo here: https://github.com/mattalco/tailwind_bug

On the main page, you will see several large buttons near the top. In dev mode, the red button will activate the hover state correctly. In a production build, it will not.

[adamwathan]

You can't use interpolation to generate classes or PurgeCSS will fail to find the class, like you're experiencing:

https://github.com/mattalco/tailwind_bug/blob/master/src/components/Button.js#L5

Relevant documentation here:

https://tailwindcss.com/docs/controlling-file-size#writing-purgeable-html