Using CSS transitions with TailwindCSS v1.2

Published under TailwindCSS.

With the release of TailwindCSS 1.2, you can now create CSS Grids with Tailwind!

Here's a quick example from the Tailwind docs:

When the above button is hovered, the following will happen:

  • The opacity will transition from 50% to 100%

  • This transition will happen over the duration of 1000ms

  • The transition will use an ease-out timing function

Check it out!

Example

What classes are new in 1.2?

transition-*

You can use this class to set the transition property. The available options are:

So you if you want to transition any of the color properties on your element, use: transition-colors.

---

duration-*

Use the duration class to set the transition duration. The available options are:

---

ease-*

The ease classes allow you to set the timing function for your transition. By default, Tailwind generates a couple custom easing functions for you:

---

Be sure to check out the release notes of v1.2 to see all the new features that were released!


Thanks for reading!

Did you find this post useful? Let me know on Twitter! If you found an issue with the content, submit a pull request!

Subscribe to my newsletter to know when I publish more content in the future.

❤️ Likes: 0
📣 Retweets: 0
💬 Replies: 0
🙊 Mentions: 0