Smooth Changes

When you point at the button now, its background changes all at once. It looks smoother when one color fades into the other over a short moment. In CSS, this is called a transition. The CSS course didn't cover transitions, but in Tailwind, two classes are all you need:

.transition-colors {
	transition-property: color, background-color, border-color /* and a few more */;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

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

The class transition-colors tells the browser which properties should change gradually: the color of the text, of the background, of the border and a few others. transition-timing-function sets how the change runs: here, it speeds up quickly and then slows down gently, which looks natural. And transition-duration sets how long the change takes: 150 milliseconds (ms, thousandths of a second) by default.

The class duration-200 changes the duration to 200 ms. Other durations work the same way: duration-100, duration-300, duration-500 and so on. Changes of 150 to 300 ms feel quick, yet you can still see them.

The class transition works like transition-colors, but it also covers other properties, such as opacity and box-shadow (the shadow). When only colors change, transition-colors is enough.

Notice that the transition classes have no variant. The transition belongs to the button itself, so it runs whenever the background changes: when the mouse pointer arrives and when it leaves. With hover:transition-colors, the color would fade in, but when the pointer left, it would jump back at once.