怎么预处理 ：hover？

怎么预处理：hover？

liaosp

.t-avatar{
    @apply w-12  rounded-full shadow hover: shadow;
}

如果这样写会报错：

`(5:5) `@apply` cannot be used with `.hover\:` because `.hover\:` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.hover\:` exists, make sure that any `@import` statements are being properly
 processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  3 | }
  4 | .t-avatar{
> 5 |     @apply w-12  rounded-full shadow hover: shadow;
    |     ^
  6 | }

liaosp

已解决：

.btn { @apply bg-transparent border; }
.btn-hover { @apply text-white bg-black; }

.button { @apply btn; }
.button:hover { @apply btn-hover; }

牛铁柱

liaosp

没必要这么复杂。一句话就搞定了。

.btn { @apply bg-transparent border hover:text-white hover:bg-black; }

牛铁柱

这是我项目的代码，不会报错

@tailwind base;
@tailwind components;
@layer components {
    .menu li {
        @apply mr-10 py-9;
    }
    .menu li a {
        @apply font-medium text-base font-sans text-black;
    }
    .logo_item {
        @apply mb-4 text-center w-1/5;
    }
    .logo_item img {
        @apply max-w-full opacity-60 hover:opacity-100;
    }
}
@tailwind utilities;