lorenzobloedow / tailwind-shades-for-custom-colors

Automatically generate shades for your custom colors defined under `theme.extend.colors` in the `tailwind.config.js` file.

About

This is a Tailwind plugin for automatically generating shades for your custom colors defined under theme.extend.colors in the tailwind.config.js file.

Usage

1. Install the package:

npm install tailwind-shades-for-custom-colors

2. Register the plugin on your `tailwind.config.js` file:

 
 module.exports  = {
	content: {
		relative: true,
		files: ['./public/index.html']
	},
	theme: {
		extend: {},
	},
	plugins: [require("tailwind-shades-for-custom-colors")]
}
 

3. Define your custom colors in hex format:

 
 module.exports  = {
	content: {
		relative: true,
		files: ['./public/index.html']
	},
	theme: {
		extend: {
			colors: {
				avocado: "#8df1ab"
			}
		},
	},
	plugins: [require("tailwind-shades-for-custom-colors")]
}
 

4. Enjoy :)

	<h1 class="text-avocado-100">
		Hello world!
	</h1>