Nothing was working for me until I added the border-style: solid using border-solid. I had to explicitly set border-0 though, else it will be applied to all directions.

<div className="border-0 border-b-2 border-solid border-b-red-600">Bottom border</div>

I am using "tailwindcss": "^3.3.3"

I figure out a way, hope it helps.

The tailwind suggests that we make use of index.css instead of configuring in tailwind.config.js

As mentioned in https://tailwindcss.com/docs/functions-and-directives

So the code goes like:

tailwind.config.js

const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  darkMode: "media",
  content: ["./src/**/*.{js,jsx}", "./public/index.html"],
  theme: {
    extend: {
      colors: {
        gray: colors.gray,
        light: {
          primary: colors.orange,
        },
        dark: {
          primary: colors.green,
        },
      },
      /* Add any default values here */
      /* borderWidth: {
         DEFAULT: "4px",
       },*/
    },
  },
  plugins: [],
};

index.css

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

@layer base {
  /* Can directly apply colors : hard coded values for light and dark */
  .bg-color {
    @apply bg-white dark:bg-black;
  }

  /* Can use custom color defined in the tailwind.config.css file */
  .bg-text {
    @apply text-light-primary-800 dark:text-dark-primary-500;
  }

  /* This is how you apply the border-color for both light and dark mode */
  .border-color {
   @apply border-black dark:border-white;
  }
}

DarkMode.js

import React from "react";

const DarkMode = () => {
  return (
    <div className=" min-h-screen min-w-full bg-color">
      <div className="border-color border-4 bg-text font-bold">
        Hello
      </div>
    </div>
  );
};

export default DarkMode;

In light theme: In dark theme:

For your desired border-color change the border-color property as shown below.

 .border-color {
    @apply border-gray-100 dark:border-gray-800;
  }