Вариантные группы

Примените утилиты для одного и того же варианта, сгруппировав их в скобках.

<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>

Играть с этим:

CSS
interpret
.bg-blue-200 {
  --tw-bg-opacity: 1;
  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
}
.hover\:bg-gray-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}
.font-light {
  font-weight: 300;
}
.hover\:font-medium:hover {
  font-weight: 500;
}
.p-2 {
  padding: 0.5rem;
}