Posts Learn Components Snippets Categories Tags Tools About
/

Tailwind CSS Transition Animation for Toggling Theme

Learn how to add animation when toggling themes in TailwindCSS. Enable this to have a smoother transition when changing from different modes.

Created on Aug 24, 2021

2071 views

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.

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.

Other Reads

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)