how adding colors tag to tailwind changes to the border

Question

This is a snippet based on tailwind.

I tried to edit the tailwind config, adding the colors part as shown.

colors: {
  
  primary: {
    50: '#eff6ff',
    100: '#dbeafe',
    200: '#bfdbfe',
    300: '#93c5fd',
    400: '#60a5fa',
    500: '#3b82f6',
    600: '#2563eb',
    700: '#1d4ed8',
    800: '#1e40af',
    900: '#1e3a8a',
  },
  
  secondary: {
    50: '#f8fafc',
    100: '#f1f5f9',
    200: '#e2e8f0',
    300: '#cbd5e1',
    400: '#94a3b8',
    500: '#64748b',
    600: '#475569',
    700: '#334155',
    800: '#1e293b',
    900: '#0f172a',
  },
  
},

afterwards refreshing the page, the snippet becomes like this.

it looks like all the borders are changed, but I didn't intend to change the border config. And it is not to do with colors.primary or colors.secondary tag in the config, as long as the colors tag is added to the config, the wield looks will appear.

colors: {
   
}

Answer 1

Tailwind applies these colors not only to foreground/background colors but also to border colors by default. You can explicitly define border colors in the Tailwind config using theme.extend.borderColor. See the documentation for more details.