Dark mode classes rely on order when using @apply

[jessejanderson]

Describe the problem:

When using dark-mode, the order of @apply classes is affecting whether or not they work. The expectation is that when dark-mode is active, the @apply dark: style should apply.

Link to a minimal reproduction:

https://play.tailwindcss.com/ZVedYuKwvV

[simonswiss]

Hey!

TL;DR:

This will only happen when you use multiple @apply declarations, which is sort of an escape hatch when you want to control the source order.

A bit more details

When you use multiple @apply directives, like in your example, the following CSS gets generated:

@media (prefers-color-scheme: dark) {
  .first {
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity));
  }
}

.first {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

.last {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .last {
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity));
  }
}

You can see that for the .first class, the @media (prefers-color-scheme: dark) is declared before the plain .first class. That means that that media query will be overridden by the default class.

This is also why that scenario only happens when using the media strategy, and having the prefers-color-scheme: dark turned on.

If you move your declaration inside a single @apply like so:

.first {
  @apply dark:text-red-500 text-blue-500;
}

.last {
  @apply text-blue-500 dark:text-red-500;
}

The styles are now generated in the correct order:

.first {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .first {
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity));
  }
}

.last {
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, var(--tw-text-opacity));
}

@media (prefers-color-scheme: dark) {
  .last {
    --tw-text-opacity: 1;
    color: rgba(239, 68, 68, var(--tw-text-opacity));
  }
}

In that scenario, your problem goes away.

Hope it helps! 👍

[jessejanderson]

Ahh! Thank you for the incredibly detailed response, that makes perfect sense. I've definitely been abusing the @apply syntax. 🙈

Thanks!