[v4] Default border, divide or outline color not overriding currentColor

[zachhornsby]

What version of Tailwind CSS are you using?

v4.0.0-alpha.21

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

N/A

What version of Node.js are you using?

N/A

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/6ETpog7Ldp

Describe your issue

This works as expected with ring, but when setting a default color for border, divide or outline, it doesn't override currentColor as the fallback when no specific color utility (like border-*, divide-* or outline-*) is applied.

I believe that if a default is set, using border, divide or outline alone should use that default instead of currentColor. Currently, I'm having to define another variable to generate a utility class when I want to use the default value.

Is this behavior intentional? If so, why is ring different?

[adamwathan]

Hey! We added --default-ring-color just as a way to support backwards compatibility because rings used to be blue in v3. We didn't do this for borders or outlines because there's a simple enough way to do it in just CSS:

*,
::after,
::before,
::backdrop,
::file-selector-button {
  border-color: red;
  outline-color: blue;
}

There's no way to make the default divide color different from the default border color this way though.

Useful feedback, maybe we can add CSS variables for controlling these 👍