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

我尝试将它添加到像这样的 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
        }
    }

}

加载页面时的这个

在 md 中滚动高度时，但我的类名没有

知道为什么 tailwindcss 不使用我的课程吗？我需要在 tailwind.config.js 中配置一些东西吗

Answer 1

听起来您想添加一个新实用程序。 .一种方法是在 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 2

如果您想向自定义类添加响应式变体，您应该使用 @responsive:


@responsive {
  .animationNav { ... }
}

/* Output */

.animationNav { ... }

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

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

/* etc. */

一些注释文档：

<块引用>

这是写出 @variants 响应式 { ... } 的快捷方式，它也有效。

<块引用>

响应式变体将添加到样式表末尾的 Tailwind 现有媒体查询中。这可确保具有响应前缀的类始终击败针对相同 CSS 属性的非响应类。

tailwindcss 未在断点内使用我的自定义类

2 个答案: