TailwindCSS, change default border color for dark theme?

Question

I'm using TailwindCSS for my project, I want to set a default border color, for the normal theme I did this via:

module.exports = {
  mode: "jit",
  purge: ["{pages,app}/**/*.{jsx,tsx}", "node_modules/react-toastify/**"],
  darkMode: "media",
  theme: {
    extend: {
      borderColor: (theme) => ({
        DEFAULT: theme("colors.gray.100"), // Light theme default border color
        dark: {
          DEFAULT: theme("colors.gray.800"), // Dark theme default border color NOT WORKING
        },
      }),
  // ...
}

For the light theme, it is working fine, however, for the dark theme, I cannot seem to find a way to apply a default value, any ideas of how to make this work?

Thanks a lot!

Answer 1

Simply use

@layer base {
  *,
  ::before,
  ::after {
    @apply dark:border-gray-600;
  }
}

Because Tailwind implements border-color by default. It works!

---

Edit

If you use preflight: false, @layer base probably won't work. Try removing @layer base block and use it directly.

Answer 2

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;
  }