https://github.com/matt-d-webb/tailwind-dynamic-classes
🌈 A utility library for dynamically using tailwind css color classes
https://github.com/matt-d-webb/tailwind-dynamic-classes
colors css tailwind
Last synced: about 2 months ago
JSON representation
🌈 A utility library for dynamically using tailwind css color classes
- Host: GitHub
- URL: https://github.com/matt-d-webb/tailwind-dynamic-classes
- Owner: matt-d-webb
- Created: 2022-01-21T09:57:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-18T22:11:00.000Z (over 3 years ago)
- Last Synced: 2025-04-05T05:17:45.016Z (3 months ago)
- Topics: colors, css, tailwind
- Language: TypeScript
- Homepage:
- Size: 292 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind Dynamic Classes
[](https://circleci.com/gh/matt-d-webb/tailwind-dynamic-classes/tree/master)
A utility library for dynamically using tailwind css color classes.
🌈
Have you tried this?
`text-${color}-500 ` ❌
Well, now you can try this ...
`${textColor500[color]} ` ✅
### How to install
```bash
npm i --save tailwind-dynamic-classes
```
OR
```bash
yarn add tailwind-dynamic-classes
```
### Example usage:
```js
import { bgColor500, ...manyMore } from "tailwind-dynamic-classes";
```
React component example:
```jsx
const classNames = (...classes) => {
return classes.filter(Boolean).join(" ");
};
const colors = [
"red", "orange", "yellow",
"green", "blue", "purple"
];
const Flag = ({ colors }) => {
return (
<>
{colors.map(color => {
})}
>
)
}
const Stripe = ({ color }) => {
return (
)
};
```
You can also use these directly:
```jsx
import { textColor900, mdTextColor700 } from "tailwind-dynamic-classes";
// "text-color-red-900"
const red = textColor900.red;
// "md:text-color-blue-700"
const blue = mdTextColor700.blue;
```
Includes `theme` and `screen` classes:
```jsx
import { darkBgColor200, mdBorderColor50 } from "tailwind-dynamic-classes";
```
```js
// dark:bg-color-grey-200"
console.log(darkBgColor200.grey);
// md:bg-color-orange-200"
console.log(darkBgColor200.orange);
```
Quickly see which colors are generated:
_Note: using a color here that isn't part of your config will **not** be picked up by 'tailwind' unless you're using the 'JIT' configuration option. Find out more here: [just-in-time engine](https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine)_
**Limitations** ✋
This does not support custom color pallette names defined in your `tailwind.config.js` file.
It takes the `@latest` color pallette generation from the `tailwindcss/colors` package.