Using @layer base { border-color } is not working for TailwindCSS ver 4

[titanve]

What version of Tailwind CSS are you using?

v4.0.0

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

postcss 8.5.1, webpack 5.28.0

What version of Node.js are you using?

v20.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

After migrating TailwindCSS to ver 4 the borders has a black color and they were previosly gray, I'm trying this fix that you put in the website but it doesn't work (https://v3.tailwindcss.com/docs/v4-beta#default-border-color-change)

Is there any other workaround in order to fix the border color back to gray?

This is the proposed fix:

@import "tailwindcss";

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

Thanks.