https://github.com/videsk/tailwind-random-color
Generate random tailwind colors with a custom palette range
https://github.com/videsk/tailwind-random-color
Last synced: 8 months ago
JSON representation
Generate random tailwind colors with a custom palette range
- Host: GitHub
- URL: https://github.com/videsk/tailwind-random-color
- Owner: videsk
- License: mit
- Created: 2021-05-03T15:10:42.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-06T18:20:01.000Z (over 1 year ago)
- Last Synced: 2025-08-08T23:54:46.096Z (11 months ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 17
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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:
```js
new TailwindColor().pick();
// Output (example)
'bg-indigo-600'
```
Else if you want certain colors and number range:
```js
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:
```js
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:**
```js
const options = {
colors: ['romantic', 'beautiful'],
prefix: 'text'
};
new TailwindColor(options).pick();
// Output
text-romantic-200
```
**Remove:**
```js
const colors = new TailwindColor();
colors.color('green').remove();
colors.color(['red', 'green']).remove();
```
# Copyrights
MIT License, develop by Videsk with ❤️.