tailwindcss 未在断点内使用我的自定义类 [英] tailwindcss not using my custom class inside breakpoints
问题描述
我正在尝试在 md 断点内的 height 属性上添加一些动画，但顺风不会使用我的类
I am trying to add some animation on the height property inside the md breakpoint but tailwind won't use my class
<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>
我的笨蛋
I tried adding it to the tailwindcss utilites like this, but still won't work我尝试将它添加到像这样的 tailwindcss 实用程序中，但仍然不起作用
@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
}
}
}
this when loadig the page加载页面时的这个
在 md 中滚动高度时，但我的类名没有
知道为什么 tailwindcss 不使用我的课程吗?我需要在 tailwind.config.js 中配置一些东西吗
推荐答案
如果您想向自定义类添加响应式变体，您应该使用 @responsive:
@responsive {
.animationNav { ... }
}
/* Output */
.animationNav { ... }
@media (min-width: 640px) {
.sm\:animationNav { ... }
}
@media (min-width: 768px) {
.md\:animationNav { ... }
}
/* etc. */
Some notes the doc:一些注释文档:
这是写出 @variants 响应式 { ... } 的快捷方式，它也有效.
<块引用>
响应式变体将添加到样式表末尾的 Tailwind 现有媒体查询中.这可确保具有响应前缀的类始终击败针对相同 CSS 属性的非响应类.
The responsive variants will be added to Tailwind's existing media queries at the end of your stylesheet. This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.
这篇关于tailwindcss 未在断点内使用我的自定义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
