@dark directive for applying selector only when tailwind's dark mode is active.

[henriquekirchheck]

The idea is to have a @dark directive that would modify the selector to only be applied only when tailwind's dark mode is active, something like:

.backgroud {
  @apply bg-local bg-center bg-repeat;
  background-image: linear-gradient(
      to bottom,
      #d3d3d3 0%,
      transparent 8%,
      transparent 92%,
      #d3d3d3 100%
    ),
    url("/img/light-bg.png");
}
@dark .background {
  background-image: linear-gradient(
      to bottom,
      #262626 0%,
      transparent 8%,
      transparent 92%,
      #262626 100%
    ),
    url("/img/dark-bg.png");
}

or even something like a media selector, like this:

.backgroud {
  @apply bg-local bg-center bg-repeat;
  background-image: linear-gradient(
      to bottom,
      #d3d3d3 0%,
      transparent 8%,
      transparent 92%,
      #d3d3d3 100%
    ),
    url("/img/light-bg.png");
}
@dark {
  .background {
    background-image: linear-gradient(
        to bottom,
        #262626 0%,
        transparent 8%,
        transparent 92%,
        #262626 100%
      ),
      url("/img/dark-bg.png");
  }
}

---

For me to get a similar result, I added this to the tailwind config:

const config = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  // darkMode: "class",

  theme: {
    extend: {
      backgroundImage: {
        "dark-bg": `
        linear-gradient(to bottom, #262626 0%, transparent 8%, transparent 92%, #262626 100%),
        url('/img/dark-bg.png')
        `,
        "light-bg": `
        linear-gradient(to bottom, #d3d3d3 0%, transparent 8%, transparent 92%, #d3d3d3 100%),
        url('/img/light-bg.png')
        `,
      },
    },
  },
};

but this seems wasteful because I'm only going to use this once in the entire page.

I know I could just write out the media query or the class, but it would be more convenient for this to be managed by tailwind.

All the other discussions mentioning something like this were asking for help, and in the most part the replies mentioned that you should write the media query or the class.

[mokone91]

yeah, this will be very usefull.
In my case we building a UI library and sometimes we need to provide a CSS variable to child web-component. we also do not want to hardcode dark selector so user can change attribute or class name.

one more example - is a scrollbar customization:

* {
  scrollbar-color: transparent transparent;

  scrollbar-width: thin;
}

/* Gecko (light) */
*:hover {
  scrollbar-color: theme('textColor.on-disabled') transparent;
}

/* Gecko (dark) */
:is(.dark, [data-theme="dark"]) *:hover {
  scrollbar-color: theme('textColor.on-disabled-dark') transparent;
}

as you can see - now .dark and [data-theme="dark"] is hardcoded values, but something directive can help to avoid this, like

@dark {
   *:hover {
   scrollbar-color: theme('textColor.on-disabled-dark') transparent;
 }
}

[mokone91]

One more case:
As components library - we want to allow our users to customize colors in runtime, we can use CSS vars for this.
So for this reason we need to generate CSS file with variables, and use variable names in tw config
We want to do something like this:

:root {
  --or-c-bg: white;
  --or-c-bg-light: white;
  --or-c-bg-dark: black;
}

:root, [data-theme="light"] {
  --or-c-bg: var(--or-c-bg-light)
}

:root, [data-theme="dark"] {
  --or-c-bg: var(--or-c-bg-dark)
}

as you can see - we want make possible to use any light/dark value if we need and we have dynamic variable where color depends on currently active mode
But we do not want to hardcode 'dark' attribute.