TailwindCSS, change default border color for dark theme?

user_3107926 0
Viewed 1143

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!

tailwind-css css
1 Answers

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: enter image description here In dark theme: enter image description here

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

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