Tailwind CSS 变体 - Framer Motion

Question

如何将 Tailwind CSS 类使用到成帧器运动对象中。

const variant = {
    hidden: {
      'w-0'
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping:30,
      }
    }
  }

  return (
    <div className='flex relative w-full h-full'>

      <button className='absolute z-40 top-0 left-0 origin-left bg-white rounded-lg px-6 py-2'>Open</button>

      <motion.div variants={variant} initial="hidden" animate="visible"  className="flex absolute bg-gray-100 top-0 bottom-0 ">
        some
      </motion.div>
      

    </div>
  )

在上面的示例中，我想在“隐藏”属性中使用任何 tailwind css 类，但不知道如何实现它。“w-0”应该是我的方法，但就像我在代码中显示的那样，它不起作用

Answer 1

不幸的是，我认为这是不可能实现的
最好的方法是做你想做的事

const variant = {
    hidden: {
      // Property width directly
      width:0
    },
    visible: {
      width: 400,
      transition: {
        type: 'spring',
        stiffness: 170,
        damping:30,
      }
    }
  }