Check out my Messages component below:
import randomColor from "random-color";
import React from "react";
import "../Chat.css";
function DisplayMessage({ username, message }) {
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 ">{message}</p>
<p className="text-gray-400 text-xs " >{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
);
}
export default DisplayMessage;
Upon using console.log(changeTextColor);, I'm able to retrieve the Hexcode, however there seems to be an issue with tailwind fetching it correctly.