How do correctly describe the opacity for a colors?

[afuno]

I'm using version 1.7.2.

There is an example on the release page:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,
    },
  },
}

In this code, there is an error in the variable.

This example has a link to Pull (#1676) which has this code:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: variable => `rgba(32, 32, 32, var(${variable}, 1))`,
    },
  },
}

Options using only opacityVariable or only variable do not work for me. I always get the error:

@apply cannot be used with .border-primary because .border-primary either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .border-primary exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

When I return everything to my original code, then everything is fine:

primary: 'var(--color-primary)',

My non-working options based on your recommendations:

primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`,
// or
primary: ({ variable }) => `rgba(var(--color-primary), var(${variable}, 1))`,

Can you please tell me what I'm doing wrong?

[adamwathan]

This should be improved in v1.7.3, there was a bug (although I think it was a different bug than what you're seeing).

I'd recommend defining closure-based colors like this:

primary: ({ opacityValue, opacityVariable }) => {
  if (opacityValue !== undefined) {
    return `rgba(var(--color-primary), ${opacityValue})`
  }

  if (opacityVariable !== undefined) {
    return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
  }
  
  return `rgb(var(--color-primary))`
},

See related discussion here: #2185

[afuno]

@adamwathan I copied and pasted this code and now I get this error:

TypeError: value.charCodeAt is not a function

[afuno]

And this code does not work for me:

primary: 'rgb(var(--color-primary))',

It is defined in the inspector in the browser. And there is even a color icon. That is, in the inspector in the browser, the color seems to have been determined.

But on the pages, the text is not painted over. Only the default color from the body.

[adamwathan]

Can you share a project that reproduces the issue please? We usually immediately close issues that don't contain a reproduction.

[afuno]

@adamwathan Unfortunately I can not. I just don't have one in the compiled code like in your documentation:

.text-purple-600 {
    --text-opacity: 1!important;
    color: #805ad5!important;
    color: rgba(128,90,213,var(--text-opacity)))!important;
}

For some reason, mine is like in the screenshot above.

I added this default code to my config file:

purple: {
  100: '#faf5ff',
  200: '#e9d8fd',
  300: '#d6bcfa',
  400: '#b794f4',
  500: '#9f7aea',
  600: '#805ad5',
  700: '#6b46c1',
  800: '#553c9a',
  900: '#44337a',
},

And for some reason, more properties appear in the compiled code:

.text-purple-100 {
    --text-opacity: 1;
    color: #faf5ff;
    color: rgba(250, 245, 255, var(--text-opacity));
}

But I don't know whether these problems are related or not.

[afuno]

@adamwathan I only kept one color:

colors: {
  primary: ({ opacityValue, opacityVariable }) => {
    return `rgb(var(--color-primary))`
  },
},

TypeError: value.charCodeAt is not a function

[afuno]

For:

primary: '#ff0000',

It turns out this:

.text-primary {
    --text-opacity: 1;
    color: #ff0000;
    color: rgba(255, 0, 0, var(--text-opacity));
}

For:

primary: 'var(--color-primary)',

It turns out this:

.text-primary {
    color: var(--color-primary);
}

[adamwathan]

Can't help without a reproduction unfortunately. Please create a new GitHub repository that demonstrates the problem and provide a link so we can help. It doesn't have to be your real project, just a new demo project that actually shows the bug. Very good chance there is no bug here and just misconfiguration or a misunderstanding of how things are meant to work.

[vseventer]

@afuno @adamwathan I ran into the same issue, and found out that, as far as I can tell, the color variable needs to be declared in RGB format for all of this to work.

• Doesn't work: --color-primary: #ff0000;
• Works: --color-primary: 255, 0, 0;

[afuno]

@vseventer I apologize for the long answer. For me, all three options give the same error:

• --color-primary: #ff0000;
• --color-primary: 255, 0, 0;
• --color-primary: rgb(255, 0, 0);

[afuno]

And I don't understand why, for example, in the documentation, the text has these styles:

But my text only has this:

But if I replace this code:

primary: 'var(--color-primary)',

On this:

primary: '#ff0000',
// or
// primary: 'rgb(255, 0, 0)',

But new attributes appear:

But if we return to the problem, then, for example, this code:

primary: ({ opacityValue, opacityVariable }) => {
  if (opacityValue !== undefined) {
    return `rgba(255, 0, 0, ${opacityValue})`
  }

  if (opacityVariable !== undefined) {
    return `rgba(255, 0, 0, var(${opacityVariable}, 1))`
  }

  return `rgb(255, 0, 0)`
},

Will still throw an error:

TypeError: value.charCodeAt is not a function

[afuno]

@adamwathan Are there any options?

[afuno]

@adamwathan Does it have something to do with this #2515?

[afuno]

Found the problem. It should be done this way:

:root {
  --color-primary: 255, 0, 0;
}

And like this:

primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`,

[adamwathan]

Here's a full demo of how to do it correctly:

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

[afuno]

@adamwathan

Should this code be exactly like this?

primary: ({ opacityVariable, opacityValue }) => {
  if (opacityValue !== undefined) {
    return `rgba(var(--color-primary), ${opacityValue})`
  }
  if (opacityVariable !== undefined) {
    return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
  }
  return `rgb(var(--color-primary))`
},

Everything seems to be successful with this short code:

primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${opacityVariable}, 1))`

🤔

[adamwathan]

Yep otherwise it won't work with gradients, which pass an opacityValue rather than an opacityVariable.

[afuno]

Okay, got it. Maybe it's better to prepare some function "out of the box" for this?

Like this:

const preparedColor = (colorName, opacityValue, opacityVariable) => {
  if (opacityValue !== undefined) {
    return `rgba(var(${colorName}), ${opacityValue})`
  }

  if (opacityVariable !== undefined) {
    return `rgba(var(${colorName}), var(${opacityVariable}, 1))`
  }

  return `rgb(var(${colorName}))`
}