This is a Tailwind plugin for automatically generating shades for your custom colors defined under theme.extend.colors in the tailwind.config.js file.
- Install the package:
npm install tailwind-shades-for-custom-colors2. 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>