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

Posted 2023-03-06

【中文标题】tailwindcss 没有在断点内使用我的自定义类

【英文标题】：tailwindcss not using my custom class inside breakpoints

【发布时间】：2021-04-30 03:17:39

【问题描述】：

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

 <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中配置一些东西吗

【参考方案1】：

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

@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

【讨论】：

在@layer 实用程序中将动画添加到我的 sass 文件时，它仍然无法正常工作

@MaximeGhéraille 你编译了你的 sass 和你完成的 css 然后有你的新实用程序吗？你看过了吗？如果您不使用指纹清空浏览器缓存。

【参考方案2】：

如果你想为你的自定义类添加响应式变体，你应该使用@responsive：

@responsive 
  .animationNav  ... 


/* Output */

.animationNav  ... 

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


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


/* etc. */

一些注释文档：

这是写出@variants responsive ... 的快捷方式。

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

【讨论】：

在@variant reponsive 内部没有更好的吗，因为它在所有断点上都是相同的行为，我不想单独更改它们

是的，它在所有断点上都是一样的，但你猜怎么着......你不应该一次使用所有断点。你要做的是这样的：md:animationNav --> 只在 md 分辨率下应用这个类

伟大的作品非常好！谢谢！

【参考方案3】：

就这么简单

@screen md 
  // whatever