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.

[RobinMalfait]

Hey!

Can you share a minimal reproduction repo and link it here?

That proposed fix seems to work as expected to me:

1. Without fix — https://play.tailwindcss.com/0mHcNpU1qd?file=css
2. With fix — https://play.tailwindcss.com/DBIDBNZvrN?file=css

[titanve]

Hi @RobinMalfait
The problem is that all the setup is in the app for the company I work for.

Here is the files tree view and the place I'm putting the code in:

Thanks.

[titanve]

Do I have to define --color-gray-200 somewhere?
Thanks.

[RobinMalfait]

The --color-gray-200 is coming from the default theme defined by @import "tailwindcss";. If you can create a minimal reproduction repo and attach it here that would be useful.

[titanve]

@RobinMalfait I think that because I am importing a legacy tailwindcss JS config file the --color-gray-200 was not defined by default when importing @import "tailwindcss";, so by doing this I could fix the issue with the default border color:

@import "tailwindcss";

@theme {
  --color-gray-200: #DDDDDD;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
}

Thanks.

[titanve]

@RobinMalfait
This is how I load with postcss:

[RobinMalfait]

If you want to use a tailwind.config.js file, you have to add it to your CSS using @config "tailwind.config.js";.

More info: https://tailwindcss.com/docs/functions-and-directives#config-directive

[titanve]

@RobinMalfait
I have added it here:

I am importing the config file after I import all the *.scss files (including _base.scss which has the @import "tailwindcss";)

Should I add the config file before?

[titanve]

@RobinMalfait
If I do this the issue gets fixed, but I am not sure if that is the right fix:

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    @apply border-gray-200;
  }

So I'm guessing I'm not getting the default theme because I have a JS Tailwind config file? Am I wrong?

Do I have to define @theme before @layer base { ... }?

Thanks.

[titanve]

Maybe this is related but I have a file called _colors.scss with some colors definitios like:

$bluegray: #496A7D;
$bluegray-200: #F4F7F9;
$bluegray-400: #557487;
$bluegray-600: #829FB0;
$bluegray-800: #496A7D;

And those colors are not getting loaded, maybe I am missing something in the config.

[titanve]

So the _colors.scss issue comes when I do the @apply border-gray-200 so that it is not a fix because it is forcing all the border colors to be gray-200.