通过用括号将它们分组来为相同的变体应用实用程序。

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

bg-blue-200 font-light p-2

hover:(bg-gray-400 font-medium)

.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;
}

.windi-1wngotv {
  --tw-bg-opacity: 1;
  background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
  font-weight: 300;
  padding: 0.5rem;
}
.windi-1wngotv:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
  font-weight: 500;
}