Reports

If you only apply transition-colors to the body, then it will only work on the body. For it to work on every element, you need to add it to each element. But your CSS is too strong because it's unlayered.

Unlayered CSS will be too strong - reset style cannot be overridden by TailwindCSS classes

TailwindCSS uses layers, which are ordered from weakest to strongest:

Preflight

theme, base, components, utilities

!important doesn't work for you for several reasons. One is that starting from v4, the exclamation mark has to be placed after instead of before. Another is that if you make something important, it also can't be overridden later.

Using the important modifier

To ensure proper behavior, I would place your style in either the theme or the base layer. Since it's strongly tied to theme switching, I would put it in the theme layer:

@layer theme {
  * {
    @apply transition-colors duration-500;
  }
}

Avoiding @apply is recommended, and in light of that, I would put something like this in my code:

Stop using @apply

@layer theme {
  * {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: ease;
    transition-duration: 500ms;
  }
}

How to enable globally smooth color transition for dark mode toggle in Tailwind CSS v4.1?

document.querySelector('button').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});

<script src="https://unpkg.com/@tailwindcss/browser"></script>
<style type="text/tailwindcss">
/* changed the behavior of dark: (default: based on prefers-color-scheme) to work based on the presence of the .dark parent class */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-pink: #eb6bd8;
}

@layer theme {
  * {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-timing-function: ease;
    transition-duration: 500ms;
  }
  
  :root, :host {    
    @variant dark {
      --color-pink: #8e0d7a;
    }
  }
}
</style>

<button class="size-20 bg-pink dark:text-white">Click Here</button>
<div class="w-50 h-12 bg-purple-200 dark:bg-purple-900 dark:text-white">
  Lorem Ipsum
</div>

Theme handling

For theme switching and handling, these questions are relevant:

79768550

Theme handling