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!

Calamite

Answer 1

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

Hilliard

You have the right way to handle it currently, but there is really no way to set the default for dark mode. Tailwind sets reasonable defaults for light mode, but not dark mode. IE: <div class="border"> looks fine for light mode, but has too much contrast in dark mode. There should be a way to do what is being asked here, but there isn't yet. – Swig

Answer 2

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.

Subaquatic

I love this method, its simple and it works! – Epicycle

Answer 3

I've used this approach and it works pretty well.

@layer components {
    .border,
    .border-r,
    .border-l,
    .border-t,
    .border-b,
    .border-x,
    .border-y {
        @apply dark:border-dark-600;
    }
}

Supraliminal

Answer 4

Solution for light/dark theme.

Follow the steps:

• Define your border color via CSS variable in your globals.css.
• Add your border color to tailwind.config.ts reusing the CSS var (see below). Also make sure that darkMode class strategy is defined to properly support CSS var overriding when dank mode is selected.
• Apply the border color autogenerated class border-foobar to all elements in your globals.css (see below).

Partial content of tailwind.config.ts:

const config = {
  darkMode: ['class'],
  // ...
  theme: {
    extend: {
      colors: {
        'my-border-color': 'var(--my-border-color)'
      },
    },
  },
  // ...
}

Partial content of globals.css:

@layer base {
    :root {
        --my-border-color: #e9f1fa;
    }

    .dark {
        --my-border-color: #192734;
    }
}

@layer base {
    * {
        @apply border-my-border-color;
    }
}

Attrition