Installation

First install the package

npm i tailwind-color-generator

Then the plugin is a super simple implementation. You pass the generator your desired color name and the base for that color, and you'll have access to colors 50 - 900 with the base color name.

//tailwind.config.js
const gen = require('tailwind-color-generator');

module.exports = {
  ...,
  plugins:  [
    ...,
    gen('lavendar', '#5245a8')
  ]
}

//index.html
<p class="text-lavendar-400">
  This is pretty cool!
</p>

You can also optionall pass in the saturation factor, and lightness factor as the third and forth parameters.

  ...,
  plugins:  [
    ...,
    gen('lavendar', '#5245a8', 2, 5)
  ]

This will allow you the change the difference in saturation and light between each shade of color. By default we use  1.771968374684816  and 7.3903743315508015 because these are the averages that steps change in tailwind's default colors.

It should be noted here that tailwind's colors were picked by hand, and the difference is saturation and light between colors varies. This is not perfect, but hopefully it will help get you started on something great!

There is also a cool web app, Shades Generator, that takes a different aproach to lightening and darkening colors. Try them too!