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: 3 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 (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-17T15:58:48.000Z (7 months ago)
- Last Synced: 2025-10-18T18:21:10.131Z (7 months ago)
- Topics: color, deterministic, hash, shade, string-hashing, string-to-color, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 356 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- 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://npmjs.com/package/string-to-tailwind-color)
[](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
Install from npm with your favourite package manager:
```sh
# npm
npm install string-to-tailwind-color
# yarn
yarn add string-to-tailwind-color
# pnpm
pnpm add string-to-tailwind-color
# bun
bun add 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 (incrementing 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}
);
};
```
## Development
### Prerequisites
- [Node.js](https://github.com/nodejs/node) (>=18.x.x)
- [pnpm](https://github.com/pnpm/pnpm) (>=10.x.x)
### Getting Started
Clone the repository and install dependencies:
```sh
git clone https://github.com/jamieweavis/string-to-tailwind-color.git
cd string-to-tailwind-color
pnpm install
```
Run all tests with [Vitest](https://github.com/vitest-dev/vitest):
```sh
pnpm test
```
Check the code for linting and formatting issues with [Biome](https://github.com/biomejs/biome):
```sh
pnpm check
```
Build the package with [Parcel](https://github.com/parcel-bundler/parcel):
```sh
pnpm build
```