如何让Animate.css使用Tailwind的@responsive指令？
我正在尝试将CSS类库导入响应指令。
Animate.css包含一堆来自https://daneden.github.io/animate.css/的类和关键帧动画。
我得到的错误是: CssSyntaxError：@apply不能与.fadeInRight一起使用，因为.fadeInRight要么找不到，要么它的实际定义包括一个伪选择器，如：.fadeInRight、:active等等。如果您确信.fadeInRight存在，请确保在Tailwind看到您的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
}
}回答 1
Stack Overflow用户
发布于 2021-09-07 04:21:10
对于来到这里的新用户，我做了一个简单的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 ...
});其他替代方案：I能够找到一个插件tailwindcss-animatecss，除了长配置之外，它做的事情差不多是一样的。但当有人问这个问题时，它是可用的。奇怪的是，没有人指出这一点。
现在，关于您所得到的错误，任何被指令使用但既不是TW核心的一部分，也不是某个插件/配置注入的类，都必须在@layer指令下定义。
因此，我们实际上需要这样做(如果不喜欢使用任何第三方包)：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
// define your Animate.css classes here
}
// use them here or in your codehttps://stackoverflow.com/questions/59955412
复制相似问题
腾讯云开发者
