Animations and Transitions
Use transition, transform and animation utilities to improve user experience.
Learning approach
Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.
Tailwind Example
HTML + Tailwind CSS
<div class="p-10">
<div class="inline-block rounded-2xl bg-indigo-600 p-8 text-white
transition duration-500
hover:scale-110
hover:rotate-2">
Hover Me
</div>
</div>
Live Preview
Your Tailwind design will appear here.
Click Run Preview
See the lesson example here.
Test your understanding
Choose the best answer.
What is one major benefit of Tailwind CSS?