尝试渲染所有Twcss颜色，
因为他们偶尔会失踪
但最终只有几个可以随机显示。
我可以逐个手动使用它，否则它就不会显示在Map上
编辑：添加密钥，已逐个设置，刷新将不能正常工作

export function Twcolors(props: TwcolorsProps) {
  const colors = ['', 'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
  return (
    <>
      <main className="flex w-screen flex flex-col items-center justify-center">
        <h1 className="text-4xl mt-3 font-extrabold text-gray-900 tracking-tight text-indigo-500">
          Tailwind CSS
          Colors</h1>
        <p className="my-4 text-center leading-loose">
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-inherit</code>
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-current</code>
          <code className="bg-gray-200 px-3 py-1 rounded-lg">-transparent</code>
          <code
            className="bg-gray-200 px-3 py-1 rounded-lg">-black</code>
          <code
            className="bg-gray-200 px-3 py-1 rounded-lg">-white</code>
          <br/>as well as the following:</p>

        <div className="bg-neutral-300"> Some</div>
        {
          colors.map(
            (color) => (

              <div key={color.toString()} className="grid grid-rows-10 grid-flow-col items-left">
                <h2 key={color.toString()}>{color} {`bg-${color}-50`}</h2>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-50`}>50
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-100`}>100
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-200`}>200
                </div>
                <div key={color.toString()}
                     className={`h-12 w-24 m-1 flex items-center justify-center rounded-xl bg-${color}-300`}>300
                </div>

              </div>

            )
          )
        }

      </main>

    </>

  )
    ;
}

export default Twcolors;