如何让 Animate.css 与 Tailwind 的 @responsive 指令一起使用？

Posted 2023-03-07

【中文标题】如何让 Animate.css 与 Tailwind 的 @responsive 指令一起使用？

【英文标题】：How do you get a Animate.css to work with Tailwind's @responsive directive?

【发布时间】：2020-05-14 06:16:49

【问题描述】：

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

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

我得到的错误是： ？？？ CssSyntaxError: @apply cannot be used with .fadeInRight because .fadeInRight 要么找不到，要么它的实际定义包含一个伪选择器，如:hover、:active等。如果你确定.fadeInRight存在，确保所有@import 语句都得到正确处理在 Tailwind CSS 看到您的 CSS，因为 @apply 只能用于同一 CSS 树中的类。

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

tailwind 正在构建的 css 文件看起来像这样。

@import '../assets/css/Animate.css';

@tailwind base;

@tailwind components;

@tailwind utilities;

@responsive 
  .tw-fadeIn 
    @apply fadeIn
  

【问题讨论】：

我的意思是，看起来 scss 运行它虽然我不熟悉顺风，但似乎你应该能够将 @apply 与 scss 本机 @extend 交换并得到相同的东西。他们的安装页面文档中还有一些特殊的东西供 scss 使用。

请显示tailwind.config.js。可能，你没有他的设置。

module.exports = 重要：true，主题： fontFamily: display: ['Roboto', 'sans-serif'], body: ['Roboto', 'sans-serif'] ，，扩展：颜色：'agility-main'：'#16c6ff'，'agility-main-hover'：'#04b2ea'，'agility-black'：'#333'，'agility-success'： '#13997f', 'agility-background': '#efefef', 'agility-red-main': '#a51414', 'agility-red-secondary': '#ff1515', , , ,

这是配置文件。使用tailwind，@apply 是一个触发器，可以让whatever指令修改您放入其中的类。我尝试将我的 css 文件修改为 scss 文件，但 tailwind 没有对导入的 css 文件应用任何响应。

【参考方案1】：

对于刚来这里的新用户，我做了一个简单的 Animate.css 移植，它兼容 TailwindCSS 风格的animations，因此可以直接被@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