使用顺风的动态样式

Question

我正在尝试编写一个自定义光标，我想使用顺风将x和y位置(从mousepos获得)设置为顶部和左侧位置-由于某种原因这是不工作的。

top-[${mousepos.y}] ,left-[${mousepos.x}]的样式不工作，其他工作良好。

的代码

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;

Answer 1

TailwindCSS不允许动态生成类。因此，当您使用以下代码生成类…

top-[${mousepos.y}] left-[${mousepos.x}]

…TailwindCSS不会把它作为一个有效的TailwindCSS类，因此不会产生必要的CSS。

相反，您必须在源代码中包含类的全名。您可以像这样返回完整的值

function  myFunc() {
return `top-[${mousepos.y}] left-[${mousepos.x}]` ;
}

像这样使用

className={`fixed pointer-events-none rounded-full border-2 w-[50px] h-[50px] border-violet-600 ${myFunc}`}

通过这种方式，每个类的整个字符串都在源代码中，因此TailwindCSS将知道如何生成适用的CSS。

阅读更多:https://tailwindcss.com/docs/content-configuration#class-detection-in-depth