Tailwind's hover modifiers like
hover:bg-blue-700
are powerful for interactivity.
GOTCHA: Without transition utilities, hover effects can be instant and jarring.
This button changes background color instantly on hover. Notice the abrupt change.
Classes:
hover:bg-red-700
This button uses
transition-colors
and
duration-150
for a smooth effect.
Classes:
hover:bg-green-700 transition-colors duration-150 ease-in-out
Always consider adding
transition
,
transition-colors
(or other `transition-*` properties like `transition-opacity`, `transition-transform`),
along with a
duration-*
class (e.g.,
duration-150
,
duration-300
)
to your hover effects for a better user experience.
Also, be mindful not to overdo hover effects, as too many or too flashy animations can be distracting.