Disabling an opacity plugin breaks support for custom property colors

[stefanfisk]

What version of Tailwind CSS are you using?

2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind Play

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 repository

https://play.tailwindcss.com/YVjDQE13bj

Describe your issue

Colors defined by a function as described in https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo break for plugins where the associated opacity plugin is disabled.

This is caused by the plugins not calling withAlphaVariable() when opacity plugins are disabled:

tailwindcss/src/plugins/backgroundColor.js

Line 11 in 691ed02

'background-color': value,

. Since the function

This behaviour makes it impossible to selectively disable opacity plugins when using colors defined via functions.

Since the example repo shows how the function is expected to support the case where neither opacityVariable nor opacityValue are provided, I would expect it to work.

[stefanfisk]

A workaround is to provide an empty theme instead of disabling the opacity plugin, for example backgroundOpacity: {}.

[adamwathan]

Thanks, fixed in #5470! This fix probably won't land in 2.x unfortunately as we are working on 3.0 on master now, but you can use your workaround for now at least. Personally I would just not bother disabling the opacity plugins and let PurgeCSS strip that stuff out 👍🏻