How to make outline use the same color that a border would be?

In tailwind

<div class="border w-80 h-80 m-80"></div>

and

<div class="outline w-80 h-80 m-80"></div>

look totally different, at least after injecting preflight by using @tailwind base; in my CSS.

I would like to make the outline case look as similar as possible to the border.

I have thought about adding custom extensions in my tailwind.config.js, e.g.

module.exports = {
  theme: {
    extend: {
      outlineColor: 'var(--tw-border-color)',
      /* or */
      outlineColor: {
        primary: 'red',
      }
    }
  }
}

But these unfortunately haven't worked at all,

1. I don't think tailwind sets a --tw-border-color variable
2. using the second try

   <div class="outline outline-primary w-80 h-80 m-80"></div>
   

   doesn't make a red outline.

I would prefer to not have to hardcode the color, the best solution would be that the lone outline classname always produces an outline that looks the same as the border that the lone border classname would produce.

I would like to use outline instead of border so that I can solve the problem of double-borders in a grid in a more convenient way.

I've found a way that works, but it requires adding custom old school CSS.

Just manually copy all of Preflight's border styles onto outlines.

So, I've copypasted Preflight's section on borders into my stylesheet, and edited it to point at the analogous outline styles instead:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    *,
    ::before,
    ::after {
        /* https://unpkg.com/tailwindcss@3.4.16/src/css/preflight.css */
        outline-width: 0;
        outline-style: solid;
        outline-color: theme('borderColor.DEFAULT', currentColor);
        outline-offset: 0;
    }
}