Posts Learn Components Snippets Categories Tags 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

18 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

Snippets by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components

Other Code Snippets

More