tw-shades
v1.3.1
Published
Automatically generate and apply shades for Tailwindcss
Downloads
2,637
Maintainers
Readme
tw-shades
This package provides a simple function to generate shades of a given color, which can be used to extend the color palette in your Tailwind CSS configuration. It allows you to create a consistent and customizable color scheme for your project.
This project is a Fork of tailwind-shades
Features
- 🌈 Color shade generator [50 to 950]
- ✨ Include Half Shades [150, 250, 350, etc]
- ⚡ Zero dependencies
- ✅ Hex and RGB Output
- ✅ CSS Variables Setup
- ✅ Typescript Support
Installation
Use npm to install tw-shades.
npm install tw-shades
Usage
// tailwind.config.js
import { shadesOf } from 'tw-shades';
/* @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
accent: shadesOf('#913985'),
/* accent: {
'50': '#f4ebf3',
'100': '#e9d7e7',
'200': '#d3b0ce',
'300': '#bd88b6',
'400': '#a7619d',
'500': '#913985',
'600': '#742e6a',
'700': '#572250',
'800': '#3a1735',
'900': '#1d0b1b',
'950': '#0f060d'
}
*/
},
},
},
plugins: [],
};
RGB Mode
You can pass a format property
import { shadesOf } from 'tw-shades';
const shades = shadesOf('#913985', { format: 'rgb' });
console.log(shades);
/* {
'50': '244 235 243',
'100': '233 215 231',
'200': '211 176 206',
'300': '189 136 182',
'400': '167 97 157',
'500': '145 57 133',
'600': '116 46 106',
'700': '87 34 80',
'800': '58 23 53',
'900': '29 11 27',
'950': '15 6 13'
} */
CSS Variables
You can create or update CSS Variables with the applyShades function
import { shadesOf, applyShades } from 'tw-shades';
const shades = shadesOf('#913985', { format: 'rgb' }); // or hex
applyShades(shades, 'primary');
/*
:root {
--color-primary-50: '244 235 243'
--color-primary-100: '233 215 231'
--color-primary-200: '211 176 206'
...
}
*/
Also in you tailwind.config.js
// tailwind.config.js
import { shadesOf } from 'tw-shades';
/* @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
primary: {
50: 'rgb(var(--color-primary-50) / <alpha-value>)',
100: 'rgb(var(--color-primary-100) / <alpha-value>)',
200: 'rgb(var(--color-primary-200) / <alpha-value>)',
300: 'rgb(var(--color-primary-300) / <alpha-value>)',
400: 'rgb(var(--color-primary-400) / <alpha-value>)',
500: 'rgb(var(--color-primary-500) / <alpha-value>)',
600: 'rgb(var(--color-primary-600) / <alpha-value>)',
700: 'rgb(var(--color-primary-700) / <alpha-value>)',
800: 'rgb(var(--color-primary-800) / <alpha-value>)',
900: 'rgb(var(--color-primary-900) / <alpha-value>)',
950: 'rgb(var(--color-primary-950) / <alpha-value>)',
},
},
},
},
plugins: [],
};
💡 Tailwind classes are generated in build time. Using CSS variables you can set colors dynamically in run time, just override the CSS custom properties.
Take into account to use the shades format and tailwind config accordely. You don't want a rgb() function for hex colors, right?
Config
Both shadesOf and applyShades are customizables by config object
shadesOf
const shadesOf: (hex: Hex, config?: ShadesConfig) => Shades;
type ShadesConfig = {
format?: 'hex' | 'rgb'; // default to hex
halfShades?: boolean; // generate halfshades, default to false
separator?: boolean; // if true, rgb colors will format as '102,6,0'
};
applyShades
const applyShades: (shades: Shades, name: string, config?: { prefix: string }) => void;
type Shades = { [key: number]: string };
/*
name: The variable name. Required.
config: {
prefix: You can change this. Default to 'color'
}
--${prefix}-${name}-${shade}: value
--color-primary-100: '233 215 231'
*/
Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (In conventional commit format, you can use 'cz')
- Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Please make sure to update tests as appropriate.
License
Distributed under the MIT License. See LICENSE.txt for more information.