Is there a way to customize the default border color resolved by the border class?

[ciacka]

What happened?

When using the border class, the resolved styles always include borderColor: "#000000" style:

const styles = useResolveClassNames("border");
console.log(styles);

> {"borderColor": "#000000", "borderStyle": "solid", "borderWidth": 1}

I'm not sure whether this is hardcoded or derived from somewhere else, but I couldn't find a way to override it via global.css.

On the web, it can be customized at the project level via global.css:

@layer base {
  * {
    border-color: #d1d5db; /* gray-300 */
  }
}

I've tried the above with Uniwind, however it had no effect on the resolved value.

Expected behavior

It would be great if the default borderColor applied by the border class were customizable via global.css, consistent with how Tailwind v4 works on the web. For example, a @layer base rule targeting * with border-color could be respected.

Current behaviour

border always resolves borderColor to #000000 regardless of any overrides in global.css.

I'm aware that I could define --color-border in the theme and then use border-border as an explicit color class, but the resulting name repetition feels off to me. I'd rather keep that as a last resort.

[Brentlok]

Hey, right now it is hardcoded

uniwind/packages/uniwind/src/core/native/store.ts

Line 214 in 17071b3

value: '#000000',

to match default's browser style

It's a cool idea to support overriding default styles, we will think about it

For now you can override built-in tailwind border utility to add your custom color

@utility border {
  border-color: var(--color-border);
}

[SouhailKrs]

@Brentlok Following up on my issue #491 which was closed as a duplicate of this. I've been trying every CSS-level workaround I can find and hitting a wall, hoping someone here has a solution I'm missing.

The goal

I want border-2, border-6, etc. to automatically use my theme's border color (--color-border) without having to always write border-6 border-border. The suggested fix from #491 only partially works.

What I've tried

1. @utility border — works only for the exact border class, not border-2, border-6, etc.

2. @utility border-* — applies the color globally for border-2 , border-6 etc. but breaks explicit color overrides. So for example if I want to override the global color in some component it doesn't work:

<View className="size-16 border-12 border-yellow-400!" />
{/* still renders --color-border, not yellow — even with important ! */}

3. @layer base { * { border-color: ... } } — no effect in React Native Expo.

Is there something I'm missing?

Is there a way in Uniwind or Tailwind v4's @utility system to set a default that only applies when no explicit color utility is present? Something like a low-priority fallback?

If not, it seems the only clean fix would be making the hardcoded '#000000' in store.ts line 214 themeable — e.g. reading from --color-border or a new --default-border-color theme variable. Would that be something worth pursuing?

[Brentlok]

We have a plans to support global CSS properties, for your case we will most likely go with something like --default-border-color or even

* {
    border-color: var(--color-primary);
}

[SouhailKrs]

@Brentlok Thanks, that approach sounds good.

[Brentlok]

We've already added support for default styles per React Native component:
https://docs.uniwind.dev/pro/default-styles

With that enabled, you can define this at the component level, for example:

View {
  border-color: var(--color-primary);
}

This will be used as the baseline borderColor, while more specific className styles can still override it.

We’ve decided not to support default styles for all elements via the universal * selector. In React Native, applying defaults to every element is a bit too broad/overkill, and component-level defaults are more explicit and predictable.

So the intended approach here is to use default styles per component rather than @layer base { * { ... } }