Using CSS Transitions with TailwindCSS v1.2

• What classes are new in 1.2?

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

Here's a quick example from the Tailwind docs:

1<button class="transition-opacity duration-1000 ease-out opacity-50 hover:opacity-100">...</button>

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!

#What classes are new in 1.2?

transition-*

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

1none: 'none',
2all: 'all',
3default: 'background-color, border-color, color, opacity, transform',
4colors: 'background-color, border-color, color',
5opacity: 'opacity',
6transform: 'transform',

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:

1'75': '75ms',
2'100': '100ms',
3'150': '150ms',
4'200': '200ms',
5'300': '300ms',
6'500': '500ms',
7'700': '700ms',
8'1000': '1000ms',

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:

1linear: 'linear',
2in: 'cubic-bezier(0.4, 0, 1, 1)',
3out: 'cubic-bezier(0, 0, 0.2, 1)',
4'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',

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

Thanks for reading this article!

Hopefully you found this article useful! If you did, share it on X!

Found an issue with the article? Submit your edits against the repository.