TailwindCSS:下拉列表不能在Nextjs中使用group和group-focus

Question

我想在单击按钮时显示一个数组。默认情况下，它是不可见的。就像菜单栏中的下拉菜单一样。我用的是group和group-focus。数组变得不可见，但在按钮点击它不出现!

<div className="group">
<button className="pointer-events-auto">Ingredients</button>
<ul className="invisible group-focus:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
{menu.ingredients.map(item => <li className="" key={item}>{ item }</li>)}
</ul>
</div>

我已经在next.config.js中设置了visibility为group-focus，但仍然不起作用:

module.exports = {
...,
variants: {
extend: {
backgroundColor: ['group-focus'],
visibility: ['hover', 'focus', 'group-focus'],
},
},
plugins: [],
}

Answer 1

import React, { useState } from 'react'
function component() {
const [show, setShow] = useState(false)
const handleShow = () => {
(show ? setShow(false) : setShow(true))
}
return (
<div>
<div className="group">
<button onClick={handleShow} className="pointer-events-auto">Ingredients</button>
<div className={show ? "block" : "hidden"}>
<ul className="invisible group-focus:visible grid sm:grid-cols-3 text-justify sm:text-sm text-xs grid-cols-2 gap-x-3 gap-y-1 list-decimal list-inside">
{menu.ingredients.map(item => <li className="" key={item}>{item}</li>)}
</ul>
</div>
</div>
</div>
)
}
export default component

可以正常工作。