Safari not interpreting var for text opacity, Links defaulting to black

[nstephenh]

What version of Tailwind CSS are you using?

v3.3.2

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

       "laravel-mix": "^6.0.30",
        "postcss-cli": "^8.3.1",
        "postcss-import": "^14.0.0",
        "webpack": "^5.94.0"

What version of Node.js are you using?

v18.18.0

What browser are you using?

Safari (I don't own a mac but these are the bug reports I'm getting)

What operating system are you using?

macOS, IOS

Reproduction URL

I don't have that, but I do have the generated CSS:

a:not(.unstyled):active {
--tw-text-opacity: 1;
  color: rgb(182 132 235/var(--tw-text-opacity));
}

Describe your issue

The above generated CSS is not interpreted by safari. I am not using the text-opacity plugin, and disabling it should hopefully solve my problem by creating proper css.

[RobinMalfait]

Hey!

Seems to work fine here using Safari: https://play.tailwindcss.com/7MHrjVzPHm

Make sure you don't have any other styles that are overriding the styles you mentioned.