Windi CSS 变体组

2023-02-16 17:58 更新

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

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号