[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 👍

[miltonjrd]

After using this, applying other colors to border using class utilities isn't possible (eg. with border-blue-500), forcing me to use !border-blue-500, which is, in my opinion, an ugly solution

[wongjn]

Try wrapping the above rule in @layer base:

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