[SOLVED] How to use the dark mode and selection modifier together in TailwindCSS?

How to use the dark mode and selection modifier together in TailwindCSS?

I'm attempting to set the text highlight colors in my project that uses TailwindCSS. This can be done fairly easily using the "selection" modifier that Tailwind provides. This works fine except when I try to set different colors for dark mode. I can't figure out what I'm doing wrong but I can't find anything online regarding how to correctly use the "dark" and "selection" modifiers in conjunction.

I tried the following syntax in attempt to get it to work correctly:

<html className="selection:bg-blue selection:text-purple dark:selection:bg-pink dark:selection:text-blue">

However, this only picks up the selection:bg-blue selection:text-purple styles and not the dark mode selection styles (dark:selection:bg-pink dark:selection:text-blue) when dark mode is activated.

Any thoughts on what I'm doing wrong? Thanks in advance.

Edit:

The colors do exist in my tailwind config:

Solution

I figured this out. I wasn't thinking and realized what I was doing wrong was putting the selection classes on the HTML tag. The HTML tag is where the dark mode class gets applied and due to this, the selection class wasn't a descendant of the .dark mode class. To fix it, I moved the selection classes to the body tag.