How can I use a custom class with Tailwind CSS for dark mode

Question

.zz3d {
  background-color: #ffffff;
  opacity: 0.8;
  background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
      24px 24px,
    linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
    linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
    linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
}

<div className="dark:zz3d w-screen gap-8 h-screen bg-white flex flex-col justify-center items-center">

Why is this code not working and how can I fix it?

I am expecting to switch the background from white to my custom background when using dark mode.

Answer 1

You should be able to use the dark: modifier for your class if you include the class in the Tailwind utilities layer.

For example:

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

@layer utilities {
  .zz3d {
    background-color: #ffffff;
    opacity: 0.8;
    background: linear-gradient(135deg, #4acab355 25%, transparent 25%) -12px 0/
      24px 24px,
      linear-gradient(225deg, #4acab3 25%, transparent 25%) -12px 0/ 24px 24px,
      linear-gradient(315deg, #4acab355 25%, transparent 25%) 0px 0/ 24px 24px,
      linear-gradient(45deg, #4acab3 25%, #ffffff 25%) 0px 0/ 24px 24px;
  }
}

See: https://tailwindcss.com/docs/adding-custom-styles#using-modifiers-with-custom-css