Don't forget to showcase all the amazing Tailwind CSS Colors,
Sometimes they go missing unexpectedly,
and only a few decide to make an appearance.
I try to add them manually one by one, but sometimes they just don't show up on the map.
Edit: I've added the key for each color, set them individually, and refreshing doesn't give the expected result.
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">
Check Out 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/>And many more:</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;