`dark` modifier in HTML can cause circular dependency issue

What version of Tailwind CSS are you using?

v.3.0.23

What build tool (or framework if it abstracts the build tool) are you using?

postcss-cli 8.4.7

What version of Node.js are you using?

v14.18.0

What browser are you using?

Chrome (Version 99.0.4844.83 (Official Build) (x86_64))

What operating system are you using?

macOS Big Sur (11.6.5)

Reproduction URL

Tailwind Play

Describe your issue

Current behavior

This issue applies to projects using the class darkMode strategy.

When using the dark modifier on an custom utility on a HTML element, and that custom utility also contains a dark modifier, you get the following error message:

<css input>: You cannot `@apply` the `dark:bg-green-700` utility here because it creates a circular dependency.

Example:

Custom utility:

.a {
    dark:text-sm
}

HTML

<div class="dark:a">Error</div>

This only applies to the dark modifier.

Expected behavior

1. This shouldn’t produce an error - it should behave like other modifiers and avoid creating a circular dependency
2. The error message should point at the usage of the custom utility rather that the implementation of the utility itself. Most likely the problem isn’t with the utility but with the usage.

[dfallman]

I’ve seen this too lately. I’m pretty sure it was the same problem, i.e. where I had this defined:

.text-subtle {
   @apply text-gray-400 dark:text-gray-600;
}

…that was used like this: <div class="dark:text-subtle"... by someone somewhere in the code base.

From the error message though it sounded like this was a mistake in the config file or in main.css, but where in fact the problem was in code base.

It took me a while to figure out what was going on. So I concur with the last reply, that there seems to be two separate issues here. The first is if this really is a circular dependency? But to me, the more pressing issue is to change the error message to a warning that points the user in the right direction, i.e. that the problem is how a custom class is used in thre code where it creates a circular dependency. Right now the error message doesn’t make any sense.

[gabrielboeker]

Hey @dfallman thanks for your reply. since i was already using that strategy before, it was fairly odd to me that it did not work until i found the issue.

the problem indeed occurs when you (in my case accidentally) assign the dark modifier on a custom class. Somewhere in my code i had a dark:text-primary 😅

I can imagine that more people will do this mistake so I consider that as the solution. Thanks!