this is the tailwind style which i want to add
import React from 'react'
function HeaderIcon({Icon}) {
return (
<div
className="flex
items-center
cursor-pointer
md:px-10
sm:h-14
md:hover:bg-gray-100
rounded-xl
active:border-b-2
active:border-blue-500"
>
<Icon className="h-5" />
</div>
)
}
export default HeaderIcon
------here i want to add tailwind style-----------------------------
<div className="flex justify-center flex-grow">
<div className="flex space-x-6 md:space-2">
<HeaderIcon Icon={HomeIcon} />
<HeaderIcon Icon={FlagIcon} />
<HeaderIcon Icon={PlayIcon} />
<HeaderIcon Icon={ShoppingCartIcon} />
<HeaderIcon Icon={UserGroupIcon} />
</div>
</div>
You have to modify the Tailwind settings to enable the active status.
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
backgroundColor: ['active'],
}
},
}