代码之家 › 专栏 › 技术社区 › Mass

如何在Tailwind CSS v4中创建配置

tailwind-css-4 tailwind-css css

Mass · 技术社区 · 3 月前

背景

我正在尝试在Tailwind CSS v4中创建自定义动画。我被困住了,因为 tailwind.config.js 这个顺风版本不推荐使用该文件,我找不到替代方案。
例如,我想要一个自定义动画,我在网上找到了 this animation js格式:

tailwind.config = {
    theme: {
      extend: {
        keyframes: {
          typing: {
            "0%": {
              width: "0%",
              visibility: "hidden"
            },
            "100%": {
              width: "100%"
            }
          },
          blink: {
            "50%": {
              borderColor: "transparent"
            },
            "100%": {
              borderColor: "white"
            }
          }
        },
        animation: {
          typing: "typing 2s steps(20) infinite alternate, blink .7s infinite"
        }
      },
    },
    plugins: [],
  }

提问

如何在Tailwind v4中获得相同的结果?我不理解将js配置文件转换为Tailwind v4语法的一般规则。

我发现了什么

在我找到的文件上 how to force Tailwind v4 to use tailwind.config.js ,但这是一种遗留方法,也排除了一些功能。由于我是从头开始构建一个网站,我认为我不必采用已弃用的操作。

我看到了关于这个主题的其他答案,但没有人解释如何从js-config传递到Tailwind v4 config。例如,在 this answer 只解释了如何实现仅翻译该段代码,但这还不足以实现我的目标。

我试图在Tailwind v4中翻译我在网上找到的文件,以寻找答案:

@utility keyframes {
    @variant typing {
        
    }
}

@utility animation {
    @variant typing {

    }
}

但我仍然卡住了,因为我不知道如何翻译一些js文件切片,如下所示:

// ...
    typing: {
        "0%": // ...

转换为Tailwind v4语法。

1 回复 | 直到 3 月前

Wongjn 3 月前

根据 the documentation :

自定义主题

使用 --animate-* 主题变量,用于自定义项目中的动画实用程序:
@theme {
  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }
}
现在 animate-wiggle 实用程序可用于标记:
<div class="animate-wiggle">
  
</div>

因此,同样地,动画将在CSS文件中定义,如下所示:

@import "tailwindcss";

@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}

<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme {
  --animate-typing: typing  2s steps(20) infinite alternate, blink .7s infinite;

  @keyframes typing {
    0% {
      width: 0%;
      visibility: hidden;
    }
    100% {
      width: 100%;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
    100% {
      border-color: white;
    }
  }
}
</style>

<div class="animate-typing h-10 bg-red-500 border-r-10"></div>