<utility>-<color>/<opacity> syntax doesn't work if your color is a css custom property (var(--color)) on tailwindcss@3.4.4

[vhoyer]

(sorry for the bad issue start, I accidently pressed enter before writing the issue)

What version of Tailwind CSS are you using?

For example: v3.4.4

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

For example: vite 4.5.3

What version of Node.js are you using?

For example: v22.2.0

What browser are you using?

For example: Firefox

What operating system are you using?

For example: majaroOS

Reproduction URL

https://github.com/vhoyer-bug-reproductions/tailwind-slash-opacity-css-var

Describe your issue

utility-color/opacity syntax doesn't work if your color is a css custom property (var(--color)) on tailwindcss@3.4.4

  <div class="container mx-auto flex p-5 gap-5">
    <div class="size-40 border bg-primary">
      bg-primary
    </div>

    <div class="size-40 border bg-primary bg-opacity-50">
      bg-primary bg-opacity-50 (works with workaround)
    </div>

    <div class="size-40 border ring ring-primary">
      ring-primary
    </div>

    <div class="size-40 border ring ring-primary/50">
      ring-primary/50 (don't work, there is no workaround)
    </div>

    <div class="size-40 border text-primary">
      text-primary
    </div>

    <div class="size-40 border text-primary/50">
      text-primary/50 (don't work, there is no workaround)
    </div>
  </div>

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #845ec2;
  }
}

import type { Config } from 'tailwindcss'

export default {
  content: [
    'index.html',
    'src/**/*',
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
      },
      backgroundColor: ({ theme }) => ({
        // this is the workaround
        primary: `color-mix(in oklab, ${theme('colors.primary')} calc(100% * var(--tw-bg-opacity, 1)), transparent)`,
      }),

    },
  },
  plugins: [],
} satisfies Config

Like, what I find funny is how we have the variables for tw-text-opacity and tw-ring-opacity in the tailwindcss' code, but I can't see how to use them, cuz the color tries to do the rgb(color/ alpha) and fails, you know 😅

[adamwathan]

Hey! See the docs on using CSS variables for colors here:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

You need to define things a bit differently if you want this to work.

Good news is in v4 we are switching to color-mix like in your example, which makes this unnecessary. It's a breaking change though that doesn't work in older browsers so we can't bring that change to v3.

[vhoyer]

ok, I'm really sorry not remember I read that part of the doc 😢

that said, is there any way I could use something like:

      colors: {
        primary: 'color-mix(in oklab, var(--color-primary) calc(100% * <alpha-value>), transparent)',
      },

?

[adamwathan]

Yep you can do that!

https://play.tailwindcss.com/gh3kVuamZu