#1737·nativewind

Custom colors on `border-s-*` and `border-e-*` don't work

Author: etx121Created Mar 13, 2026Updated Jul 17, 2026
Labelsv4

Describe the bug Using border-s-* or border-e-* with a custom color (e.g.: --primary, etc), to define a color, don't work when we use this setup We need to use border-l-* and border-r-* instead. I don't know if the issue comes from nativewind or tailwind-css v3.

Reproduction Please see our contribution guide: https://github.com/nativewind/nativewind/blob/main/contributing.md#opening-an-issue

In globals.css:

css
:root {
  --primary: 222.2 47.4% 11.2%;
}

In tailwind.config.js:

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('nativewind/preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
      }
    }
  }
  plugins: [require('tailwindcss-animate')],
};

⚠️ Important: Issues without a valid reproduction link will not be reviewed and will be automatically closed. Use the rn-new template to create a reproduction:

  • npx rn-new@latest --nativewind
  • npx rn-new@latest --nativewind --expo-router
  • npx rn-new@next --nativewind
  • npx rn-new@next --nativewind --expo-router

If you have a usage question, please use the Discord or GitHub Discussions instead.

Expected behavior The border can be colored with custom colors with border-s-* and border-e-*.