@videsk/tailwind-random-color
v0.2.0-beta
Published
Generate random tailwind colors with a custom palette range
Downloads
3,619
Readme
Tailwind Random Color
Generate random color easily, using the TailwindCSS palette. You can easily define range colors defining palette (red, yellow, indigo, etc.) and number, like:
bg-red-500
, bg-yellow-500
, ...
How to use
To get a random color with default palette of Tailwind, simply:
new TailwindColor().pick();
// Output (example)
'bg-indigo-600'
Else if you want certain colors and number range:
const options = {
colors: ['gray', 'indigo', 'red'],
range: [1,4] // Between 100 and 400,
prefix: 'bg' // Can be 'bg', 'text', etc.
};
new TailwindColor(options).pick();
// Output (example)
'bg-gray-200'
Custom colors
Also, you will be able to add your own custom color like this:
const colors = new TailwindColor(); // With default colors
colors.color('dark').add();
colors.color(['beautiful', 'romantic']).add();
colors.pick();
// Output (example)
'bg-romantic-500'
Also, you can set your customs colors without default tailwind palette or remove:
Add:
const options = {
colors: ['romantic', 'beautiful'],
prefix: 'text'
};
new TailwindColor(options).pick();
// Output
text-romantic-200
Remove:
const colors = new TailwindColor();
colors.color('green').remove();
colors.color(['red', 'green']).remove();
Copyrights
MIT License, develop by Videsk with ❤️.