Color opacity breaks when using functions to define colors

[JeffSchofield]

Describe the problem:

If I define a color using a function like this:

{
	...
	colors: {
		'primary': ({ opacityVariable }) => `rgba(255,0,0,var(${ opacityVariable }))`
	}
	...
}

The CSS variable passed in by opacityVariable is not set by default, breaking the color.

Looking at

tailwindcss/src/util/withAlphaVariable.js

Line 21 in 05406f9

export default function withAlphaVariable({ color, property, variable }) {

, it seems like this might be a bug. If I edit this file to include [variable]: '1' in the returned object, the default variable is set and everything works as anticipated.

After some discussion on discord, Robin suggested adding a default to the css variable to resolve this such as: var(${opacitiyVariable}, 1). However crswll pointed out this results in specificity issues (see repro below).

My use case is that I need to pass in my own CSS variable as the color so I cannot use the toRgba function. This is for a vite plugin so I would like to retain identical behavior to default.

Link to a minimal reproduction:

I expect the text to be red (#FF0000) but it is black: https://play.tailwindcss.com/8uIqAsBJHR?layout=vertical&file=html
Inspecting the CSS shows the --text-opacity variable is not defined.

Specificity problem from @crswll on Discord: https://play.tailwindcss.com/b2b9JVJeNf?layout=vertical&file=html

[adamwathan]

Hey! I believe it's working as expected, see this repo for an example of how you should be setting things up:

https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

[JeffSchofield]

Hey! I believe it's working as expected, see this repo for an example of how you should be setting things up:

https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo

Hello and thank you for the reply! Your link is definitely what I am aiming to accomplish and looks to be along the lines of what Robin suggested, but doesn't appear to address the issue of specifity as pointed out by crswll.

I'm concerned about breaking the expected tailwind behavior since the plugin I'm working on is meant to allow live updating the color palette in dev mode only.

When building the full project the CSS variables for the RGB components are not used and we fall back to the normal build procedure. It would not be ideal if specificity causes the build to appear different from the dev. I hope I'm explaining this correctly. Perhaps this is a tradeoff issue.

[adamwathan]

I made the changes that I showed you in that repo and it works exactly as expected, the text is red:

https://play.tailwindcss.com/ZtrdactYhr?file=config

There's no specificity issue, the issue is that your old code was broken because it wasn't accounting for the possibility of opacityVariable being undefined, which led to that CSS property being invalid and ignored by the browser.

[JeffSchofield]

That does address the original issue of it not working at all, however I added the same changes to @crswll's specificity repro and still end up with the same result:

https://play.tailwindcss.com/FDnHCSfPKz?file=config

I believe the expected behavior here is that the last bg-primary should not have opacity applied to it but it does.

[adamwathan]

Ah I understand now, sorry about that. You're right this is a bug! I will write some tests for this and get a patch put out today.

[JeffSchofield]

No worries, thank you so much for looking at this. At least it's not what I originally thought and I can make some progress today.

Side note: the playground is excellent and has already been a huge help diagnosing this issue. I had no idea it was just released, feels very solid to use.

[adamwathan]

Should be fixed in v1.8.12!