Home / Snippets / Tailwind CSS Transition Animation for Toggling Theme
Tailwind CSS Transition Animation for Toggling Theme cover

Tailwind CSS Transition Animation for Toggling Theme

4.1K

2 years ago

0 comments

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

notion avatar

Ahabz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

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

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this