下面是我的消息组件:
import randomColor from "random-color";
import React from "react";
import "../Chat.css";
function Messages({username , msg}) {
const changeTextColor = randomColor(0.99, 0.99).hexString();
console.log(changeTextColor);
return (
<div className="flex-1 px-5 py-2 chatting_body ">
<div className="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
<div className={`text-sm font-bold text-[${changeTextColor}] `}>{username}</div>
<div className="flex justify-between items-end space-x-3 ">
<p className="text-white text-lg ">{msg}</p>
<p className="text-gray-400 text-xs " >{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
);
}
export default Messages;
通过console.log(changeTextColor);
,我得到了十六进制代码,但tailwind无法获取。
1条答案
按热度按时间njthzxwz1#
请在tailwind文档www.example.com上查看有关动态类的内容https://tailwindcss.com/docs/content-configuration#dynamic-class-names