https://github.com/jamieweavis/string-to-tailwind-color
Generates a random but deterministic Tailwind CSS color and shade from a string
https://github.com/jamieweavis/string-to-tailwind-color
color deterministic hash shade string-hashing string-to-color tailwindcss
Last synced: 4 months ago
JSON representation
Generates a random but deterministic Tailwind CSS color and shade from a string
- Host: GitHub
- URL: https://github.com/jamieweavis/string-to-tailwind-color
- Owner: jamieweavis
- License: mit
- Created: 2025-04-11T16:05:42.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-07-10T19:54:48.000Z (7 months ago)
- Last Synced: 2025-08-16T21:26:26.719Z (6 months ago)
- Topics: color, deterministic, hash, shade, string-hashing, string-to-color, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 339 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# String to Tailwind Color
Generates a random but deterministic Tailwind CSS color and shade from a string
[](https://github.com/jamieweavis/string-to-tailwind-color/actions)
[](https://npmjs.com/package/string-to-tailwind-color)
[](https://github.com/jamieweavis/string-to-tailwind-color/releases)
[](https://github.com/jamieweavis/string-to-tailwind-color/blob/main/LICENSE)
## Install
```sh
npm install string-to-tailwind-color
```
## Usage
Generate a random but deterministic Tailwind CSS color and shade from a string:
```javascript
import { stringToTailwindColor } from 'string-to-tailwind-color';
const foo = stringToTailwindColor('foo');
console.log(foo); // 'teal-500'
const bar = stringToTailwindColor('bar');
console.log(bar); // 'emerald-100'
```
By default all colors and shades are used - to use a subset of colors and/or shades, you can pass an options object as the second argument:
```javascript
import { stringToTailwindColor } from 'string-to-tailwind-color';
const foo = stringToTailwindColor('foo', {
colors: ['red', 'green', 'blue'],
shades: [300, 500, 700],
});
console.log(foo); // 'red-300'
```
> [!NOTE]
> For a full list of colors and shades see [https://tailwindcss.com/docs/colors](https://tailwindcss.com/docs/colors)
If you don't like the color generated for a particular string, you can use the `hashOffset` option to rotate the color (incrememnting by 1 will give you a shade higher, decrementing by 1 will give you a shade lower, colors will also rotate):
```javascript
import { stringToTailwindColor } from 'string-to-tailwind-color';
const a = stringToTailwindColor('foo');
console.log(a); // 'teal-500'
const b = stringToTailwindColor('foo', { hashOffset: 1 });
console.log(b); // 'teal-600'
const c = stringToTailwindColor('foo', { hashOffset: 11 });
console.log(c); // 'cyan-500'
```
Use in combination with background color (`bg-`), text color (`text-`), border color (`border-`), etc:
```javascript
import { stringToTailwindColor } from 'string-to-tailwind-color';
const SomeComponent = ({ text }) => {
const color = stringToTailwindColor(text);
return (
{text}
);
};
```
> [!NOTE]
> For a full list of classes compatible with colors see [https://tailwindcss.com/docs/colors#using-color-utilities](https://tailwindcss.com/docs/colors#using-color-utilities)
## Use cases
Generate a color for a tag component based on it's contents:
```javascript
import { stringToTailwindColor } from 'string-to-tailwind-color';
const Tag = ({ name }) => {
const color = stringToTailwindColor(name, {
colors: ['red', 'green', 'blue', 'yellow', 'purple', 'pink'],
shades: [300, 400, 500, 600, 700],
});
return (
{name}
);
};
```
## Built with
- [Node.js](https://github.com/nodejs/node)
- [TypeScript](https://github.com/microsoft/TypeScript)
- [Parcel](https://github.com/parcel-bundler/parcel)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.