light/dark theme is overriding additional classes I add later

I have the following light/dark theme setup in my app.css which gives default styling to <div> and <a> tags:

<html lang="en" data-theme="dark">
... code omitted for brevity
</html>

@import "tailwindcss";
@import "tailwindcss/utilities";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@theme {
    --color-light-bg: #ffffff;
    --color-light-primary: #e6e6e6;
    --color-light-secondary: #d1d1d1;
    --color-light-text: #000000;
    --color-light-accent: #26a1ff;

    --color-dark-bg: #1e1e1e;
    --color-dark-primary: #292929;
    --color-dark-secondary: #363636;
    --color-dark-text: #ffffff;
    --color-dark-accent: #006aba;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    @apply bg-light-primary text-light-text;
}

[data-theme="dark"] {
    body {
        @apply bg-dark-bg text-dark-text;
    }
}

div {
    @apply bg-light-bg;
}

[data-theme="dark"] div {
    @apply bg-dark-primary;
}

button {
    @apply bg-light-accent text-light-text;
}

[data-theme="dark"] button {
    @apply bg-dark-accent text-dark-text;
}

a {
    @apply text-light-text;
}

[data-theme="dark"] a {
    @apply text-dark-text;
}

However these styles overwrite any tailwind classes I decide to add later, such as:

<NavLink to="/genres" className="text-red-500">Genres</NavLink>

https://gyazo.com/1da170a1f413777ec7dfbdf43ec77799

As seen in the GIF above, any class I choose to add appears to have lower specificity than the light & dark mode classes.

Is there any approach I can take to make sure this isn't the case?

Any help would be great, thank you!

Solution

You'd want to add the rules into a @layer, such as @layer base perhaps. This is needed since the utility classes are compiled into a cascade layer. Styles in cascade layer have lower precedence than those outside. Consider reading up on cascade layers on MDN.

<html data-theme="dark">
  <script src="https://unpkg.com/@tailwindcss/browser@4.0.0"></script>

  <style type="text/tailwindcss">
  @import "tailwindcss";
  @import "tailwindcss/utilities";

  @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
  @theme {
      --color-light-bg: #ffffff;
      --color-light-primary: #e6e6e6;
      --color-light-secondary: #d1d1d1;
      --color-light-text: #000000;
      --color-light-accent: #26a1ff;

      --color-dark-bg: #1e1e1e;
      --color-dark-primary: #292929;
      --color-dark-secondary: #363636;
      --color-dark-text: #ffffff;
      --color-dark-accent: #006aba;
  }

  @layer base {
    body {
        height: 100vh;
        width: 100vw;
        display: flex;
        @apply bg-light-primary text-light-text;
    }

    [data-theme="dark"] {
        body {
            @apply bg-dark-bg text-dark-text;
        }
    }

    div {
        @apply bg-light-bg;
    }

    [data-theme="dark"] div {
        @apply bg-dark-primary;
    }

    button {
        @apply bg-light-accent text-light-text;
    }

    [data-theme="dark"] button {
        @apply bg-dark-accent text-dark-text;
    }

    a {
        @apply text-light-text;
    }

    [data-theme="dark"] a {
        @apply text-dark-text;
    }
  }
  </style>

  <a href="/genres" class="text-red-500">Genres</a>
  <a href="/genres">Genres</a>
</html>