tailwind-random-colors v0.0.1

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"

License

MIT