When using next.js and tailwindCSS for styling, I created a custom component that includes tags. The issue arises when multiple instances of this component are placed on the page, as only the last one is getting the desired hover effect.
"index.js"
import TableRow from "@/components/TableRow";
export default function Home() {
return (
<>
<TableRow imageurl="https://i.ibb.co/Gp1kWY0/Keeps.png" />
<TableRow imageurl="https://i.ibb.co/NsK00Vx/Amazon-Pharmacy.png" />
<TableRow brand="HappyHead" imageurl="https://i.ibb.co/hBffkXR/Happy-Head.png" />
<TableRow imageurl="https://i.ibb.co/9r9xNZH/hims.png" />
<div className="pb-24"></div>
</>
)
}
"_app.js"
import 'tailwindcss/tailwind.css'
import '@/styles/fonts.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
"TableRow.js"
import React from 'react';
const TableRow = (props) => {
return (
<div className="w-[1400px] h-[40px] pt-28 left-56 relative ">
<div className="w-10/12 pb-4 items-center flex flex-row justify-between">
<img src={props.imageurl} className="w-[130px] object-contain" alt="keeps" />
<a className="relative text-center right-16 text-4xl text-blue-500 productpricelink" href={props.foamlink}>${props.foamPrice}</a>
<a className="relative text-center right-10 text-4xl text-blue-500 productpricelink" href={props.solutionlink}>${props.solutionPrice}</a>
<a className="relative text-center right-2 text-4xl text-blue-500 productpricelink" href={props.finlink}>${props.finPrice}</a>
</div>
<div className="h-[4px] bg-[#D9D9D9]"></div>
</div>
)
};
export default TableRow;
"fonts.css"
.productpricelink {
transition: all 0.3s;
font-family: 'Montserrat', sans-serif;
}
.productpricelink:hover {
color: #ffffff;
background-color: #2c3e50;
text-decoration: none;
font-weight: bold;
padding: 5px;
border-radius: 14px;
}
I have attempted to troubleshoot by modifying the text color within .productpricelink to test if only specific components were affected by the class, but all components changed uniformly. Copying and pasting the last component also did not resolve the issue, as only the final TableRow retains the hover style.