dark mode for border color

[miltonjrd]

I'm current using borderColor option in tailwind.config.js to change the default color for my entire website, but I missed a dark mode option to set the default color for dark mode.

theme: {
  borderColor: {
    DEFAULT: '#EFF2F4',
    // something like that
    DARK_MODE: '#000'
  },
}

[kettanaito]

For anybody wondering, as of now, Tailwind doesn't provide any API to achieve this. But you can achieve this using CSS variables (mostly to gain proper specificity):

html {
  --border-color: #d4d4d4; /* neutral.300 */

  &.dark {
    --border-color: #282828; /* neutral.800 */
  }
}

Then, in your Tailwind config:

export default {
  theme: {
    extend: {
      borderColor: {
        DEFAULT: 'var(--border-color)'
      }
    }
  }
}

Nothing else I found online worked because it created an insanely high specificity selector, making it impossible to override border colors on a component level. This above does work well.