Different output for transition-slower & duration-500

[deadcoder0904]

I have the following code where the Indigo button (transition-slower) rotates only text while Pink button (duration-500) rotates the whole button.

<div class="min-h-screen flex justify-center items-center">
	<button class="transition transition-slower ease-in-out transform hover:rotate-180 bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg">Rotate Me!</button>
	
	<button class="transition duration-500 ease-in-out transform hover:rotate-180 bg-pink-600 text-white font-bold py-2 px-4 rounded-lg">Rotate Me!</button>
</div>

The notable difference in both button’s code is transition-slower & duration-500.

And the weird part is as discussed in this PR #1273 both have similar CSS properties, i.e, transition-duration: 500ms;

Here’s a demo GIF in action (~2.8 MB)👇

[deadcoder0904]

On further investigation, I found d5199e4 where all the transition-* utilities are replaced with duration-*. Is this correct so I can close this thing?

Edit: I think Adam’s 1st comment on #1273 needs to be updated to the following code as it’s pointing from the release notes to wrong transition-* utilities.

.transition-none {
 transition-property: none !important;
}

.transition-all {
 transition-property: all !important;
}

.transition {
 transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
}

.transition-colors {
 transition-property: background-color, border-color, color, fill, stroke !important;
}

.transition-opacity {
 transition-property: opacity !important;
}

.transition-shadow {
 transition-property: box-shadow !important;
}

.transition-transform {
 transition-property: transform !important;
}

.ease-linear {
 transition-timing-function: linear !important;
}

.ease-in {
 transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}

.ease-out {
 transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

.ease-in-out {
 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.duration-75 {
 transition-duration: 75ms !important;
}

.duration-100 {
 transition-duration: 100ms !important;
}

.duration-150 {
 transition-duration: 150ms !important;
}

.duration-200 {
 transition-duration: 200ms !important;
}

.duration-300 {
 transition-duration: 300ms !important;
}

.duration-500 {
 transition-duration: 500ms !important;
}

.duration-700 {
 transition-duration: 700ms !important;
}

.duration-1000 {
 transition-duration: 1000ms !important;
}

[adamwathan]

Yeah there is no transition-slower utility. The documentation is the canonical source of truth for this stuff:
https://tailwindcss.com/docs/transition-duration/#app