When switching themes mode between "light" to "dark" or vice versa in Tailwind CSS, the page color will automatically blink which is quite a "sudden" and not a pleasant one in terms of the user experience UX. To have a better and smoother experience, you can add transition animation class in the body tag.
To enable this transition, it's as easy as adding "transition-colors duration-300" class to the body tag. By having this class defined, whenever you are toggling the modes you will see the page have a subtle color transition.
Tailwind CSS Transition Animation
To enable this transition, it's as easy as adding "transition-colors duration-300" class to the body tag. By having this class defined, whenever you are toggling the modes you will see the page have a subtle color transition.
<html> <body class="transition-colors duration-300"> <!-- ... --> </body> </html>
Do play around with the other properties, you can have different duration, animation styles, and any as you see fit.
