Как заставить Animate. css работать с директивой Tailwind @responsive? - PullRequest
Новая
       12

Как заставить Animate. css работать с директивой Tailwind @responsive?

0 голосов
/ 28 января 2020

Я пытаюсь импортировать библиотеку CSS классов в ответную директиву.

Animate. css содержит несколько классов и анимаций ключевых кадров из https://daneden.github.io/animate.css/

Я получаю сообщение об ошибке: ? CssSyntaxError: @apply не может быть используется с .fadeInRight, поскольку .fadeInRight либо не может быть найден, либо его фактическое определение включает псевдоселектор, например: hover,: active, et c. Если вы уверены, что .fadeInRight существует, убедитесь, что все операторы @import правильно обрабатываются до того, как Tailwind CSS увидит ваше CSS, поскольку @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
  }
}
...