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; }
以上内容是否对您有帮助:
更多建议: