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")]
   }
   
   

   
   
   
3. Enjoy :)

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