tailwind-random-colors
v0.0.1
Published
Generate random TailwindCSS colors, based on the options you provide.
Downloads
22
Maintainers
Readme
Tailwind Random Colors
Generate random TailwindCSS colors, based on the options you provide.
Based on TailwindCSS v. 3.4.1
Getting Started
npm install tailwind-random-colors
After your install is complete, you can use this package as shown below
const color = getRandomColor();
// "slate-900"
Examples
Generate different background colors:
const color = getRandomColor(
{
colors: ["slate", "zinc", "gray", "stone"],
prefix: "bg"
}
);
// "bg-slate-300"
return {
<div className={"${color} h-full w-full flex items-center justify-center"}>
Hello World
</div>
}
Generate light border colors:
const border = getRandomColor(
{
intensities: [100, 200, 300],
prefix: "border"
}
);
// "border-pink-100"
return {
<button className={"border-2 ${border}"}>
Click Me!
</button>
}
Generate a random custom color:
const color = getRandomColor({
colors: ["cherry", "sunset", "sand"],
});
// "sunset-400"