你如何让 Animate.css 与 Tailwind 的 @responsive 指令一起工作？

Question

我正在尝试将CSS类库导入响应指令。

Animate.css包含一堆类和关键帧动画 https://daneden.github.io/animate.css/

我得到的错误是： 🚫 CssSyntaxError：@apply不能与.fadeInRight一起使用，因为找不到.fadeInRight，或者它的实际定义包括伪选择器，如：hover，：active等。如果您确定.fadeInRight存在，请确保在 Tailwind CSS 看到您的 CSS之前正确处理任何@import语句，因为@apply语句只能用于同一 CSS 树中的类。

最终目标是根据屏幕大小以顺风方式渲染不同的动画。
即<div className="animated tw-fadeInBottom md:tw-fadeInRight faster"></div>

顺风构建的css文件看起来像这样。

@import '../assets/css/Animate.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@responsive {
.tw-fadeIn {
@apply fadeIn
}
}

Answer 1

对于来到这里的新用户，我做了一个简单的 Animate 移植.css它与 TailwindCSS 风格的动画兼容，因此可以直接被@apply等指令使用。

文档链接：https://github.com/ikcb/animated-tailwindcss#readme

基本用法

要安装，请运行：

npm i -D animated-tailwindcss
# or
yarn add -D animated-tailwindcss

然后只需用withAnimations包装您的配置(并从 CSS 中删除 Animate 的导入.css(：

const withAnimations = require('animated-tailwindcss');
module.exports = withAnimations({
// ... your config here ...
});

---

其他选择：我能够找到一个插件tailwindcss-animatecss，除了长配置之外，它或多或少地做同样的事情。但是当这个问题被问到时，它是可用的。奇怪的是，没有人指出这一点。

---

现在关于您遇到的错误，指令使用但既不是TW核心的一部分，也不是由某些插件/配置注入的任何类，都必须在@layer指令下定义。

所以实际上需要做这样的事情(如果不喜欢使用任何第三方包(：

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
// define your Animate.css classes here
}
// use them here or in your code