在断点内部没有使用我的自定义类

Question

我正在尝试在md断点内的height属性上添加一些动画，但顺风不会使用我的类

 <div className={`h-12 bg-blue flex w-full text-white fixed mt-1 md:bg-white ${scrolling ? 'md:animationNav md:h-16' : 'md:animationBasisNav md:h-20'} lg:bg-gray-500 `}>
<p>test</p>
</div>

我的粗鲁

.animationNav{
    -webkit-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;

    img{
        -webkit-transition: padding 1s ease-in-out;
        transition: padding 1s ease-in-out;
        padding: 0;
    }
}
.animationBasisNav{
    -webkit-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
    img{
        -webkit-transition: padding 1s ease-in-out;
        transition: padding 1s ease-in-out;
        padding: 0.25rem
    }
}

我试着像这样将它添加到尾风实用程序中，但仍然不起作用

@layer utilities {
    .animationNav{
        -webkit-transition: height 1s ease-in-out;
        transition: height 1s ease-in-out;
    
        img{
            -webkit-transition: padding 1s ease-in-out;
            transition: padding 1s ease-in-out;
            padding: 0;
        }
    }
    .animationBasisNav{
        -webkit-transition: height 1s ease-in-out;
        transition: height 1s ease-in-out;
        img{
            -webkit-transition: padding 1s ease-in-out;
            transition: padding 1s ease-in-out;
            padding: 0.25rem
        }
    }

}

这是在加载页面时出现的

​

​

当在md内滚动高度时，我的类名不工作

​

​

知道为什么tailwindcss不使用我的类吗？我是否需要在tailwind.config.js中配置某些内容

Answer 1

如果要将响应式变体添加到自定义类中，则应使用@responsive

@responsive {
  .animationNav { ... }
}

/* Output */

.animationNav { ... }

@media (min-width: 640px) {
  .sm\:animationNav { ... }
}

@media (min-width: 768px) {
  .md\:animationNav { ... }
}

/* etc. */

文档中的一些注释：

这是写出@variants responsive { ... }的快捷方式，同样也适用。响应式变体将被添加到Tailwind的现有媒体查询中，并放在样式表的末尾。这确保了带有响应性前缀的类始终会击败以相同CSS属性为目标的非响应性类。

Answer 2

听起来您想要添加一个新的实用程序。。一种方法是在CSS中使用@layer符号编写新的实用程序。

@layer 
 utilities {
  .animationNav {
   -webkit-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
  }

//and so on:

这是指向文档的链接：https://tailwindcss.com/docs/adding-new-utilities

Answer 3

像这样简单

@screen md {
  // whatever
}