npm React.Js的TailwindCSS不接受随机生成的颜色代码

hs1ihplo  于 2023-03-12  发布在  React
关注(0)|答案(1)|浏览(134)

下面是我的消息组件:

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无法获取。

njthzxwz

njthzxwz1#

请在tailwind文档www.example.com上查看有关动态类的内容https://tailwindcss.com/docs/content-configuration#dynamic-class-names

相关问题