When attempting to create a custom cursor, I encountered an issue with setting the x and y position values (obtained from mousepos) as the top and left positions using tailwind. For some reason, the `
top-[${mousepos.y}] ,left-[${mousepos.x}]Here is the code snippet:
import React, { useEffect, useState } from "react";
const Practice = () => {
const [mousepos, setMousepos] = useState({ x: 0, y: 0 });
useEffect(() => {
const mouseMove = (e) => {
setMousepos({
x: e.clientX,
y: e.clientY,
});
};
window.addEventListener("mousemove", mouseMove);
return () => {
window.removeEventListener("mousemove", mouseMove);
};
}, []);
console.log(mousepos);
return (
<div>
<div
className={`fixed pointer-events-none rounded-full border-2 w-[50px] h-[50px] border-violet-600 top-[${mousepos.y}] left-[${mousepos.x}]`}
></div>
</div>
);
};
export default Practice;