Плавные изменения

Сейчас, когда вы наводите указатель на кнопку, её фон меняется мгновенно. Выглядит приятнее, когда один цвет за короткое время плавно переходит в другой. В CSS это называется переходом (transition). В курсе CSS переходов не было, но в Tailwind для них хватает двух классов:

.transition-colors {
	transition-property: color, background-color, border-color /* и ещё несколько */;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

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

Класс transition-colors сообщает браузеру, какие свойства должны меняться постепенно: цвет текста, цвет фона, цвет рамки и ещё несколько. transition-timing-function задаёт, как проходит изменение: здесь оно быстро разгоняется, а потом мягко замедляется, и это выглядит естественно. А transition-duration задаёт, сколько длится изменение: по умолчанию 150 миллисекунд (мс, тысячных долей секунды).

Класс duration-200 меняет длительность на 200 мс. Другие значения работают так же: duration-100, duration-300, duration-500 и так далее. Изменения длительностью от 150 до 300 мс кажутся быстрыми, но их всё же можно заметить.

Класс transition работает как transition-colors, но охватывает и другие свойства, например opacity и box-shadow (тень). Когда меняются только цвета, хватает transition-colors.

Обратите внимание: у классов перехода нет варианта. Переход принадлежит самой кнопке, поэтому он работает всякий раз, когда меняется фон: и когда указатель мыши приходит, и когда уходит. С hover:transition-colors цвет плавно появлялся бы, но когда указатель уходил, фон возвращался бы мгновенно.