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:

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

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

Check it out!


What classes are new in 1.2?


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

none: 'none',
all: 'all',
default: 'background-color, border-color, color, opacity, transform',
colors: 'background-color, border-color, color',
opacity: 'opacity',
transform: 'transform',

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



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

'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',



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

linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'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!