TailwindCSS Plugin Example https://github.com/tailwindcss/plugin-examples

buttons.js

const _ = require("lodash");
const Color = require("color");
const defaultConfig = require("tailwindcss/defaultConfig");

function defaultOptions() {
  return {
    borderRadius: ".25rem",
    fontWeight: "600",
    lineHeight: "1.25",
    fontSize: "1rem",
    padding: ".5rem 1rem",
    border: "1px solid transparent",
    colors: {
      white: {
        background: defaultConfig.theme.colors.white,
        text: defaultConfig.theme.colors.black
      },
      black: {
        background: defaultConfig.theme.colors.black,
        text: defaultConfig.theme.colors.white
      },
      gray: {
        background: defaultConfig.theme.colors.gray[500],
        text: defaultConfig.theme.colors.black
      },
      red: {
        background: defaultConfig.theme.colors.red[500],
        text: defaultConfig.theme.colors.white
      },
      orange: {
        background: defaultConfig.theme.colors.orange[500],
        text: defaultConfig.theme.colors.white
      },
      yellow: {
        background: defaultConfig.theme.colors.yellow[500],
        text: defaultConfig.theme.colors.yellow[700]
      },
      green: {
        background: defaultConfig.theme.colors.green[500],
        text: defaultConfig.theme.colors.white
      },
      teal: {
        background: defaultConfig.theme.colors.teal[500],
        text: defaultConfig.theme.colors.white
      },
      blue: {
        background: defaultConfig.theme.colors.blue[500],
        text: defaultConfig.theme.colors.white
      },
      indigo: {
        background: defaultConfig.theme.colors.indigo[500],
        text: defaultConfig.theme.colors.white
      },
      purple: {
        background: defaultConfig.theme.colors.purple[500],
        text: defaultConfig.theme.colors.white
      },
      pink: {
        background: defaultConfig.theme.colors.pink[500],
        text: defaultConfig.theme.colors.white
      }
    },
    sizes: {
      sm: {
        fontSize: ".875rem",
        padding: ".5rem .75rem"
      },
      lg: {
        fontSize: "1.25rem",
        padding: ".75rem 1.5rem"
      },
      xl: {
        fontSize: "1.5rem",
        padding: "1rem 2rem"
      }
    }
  };
}

module.exports = function(options) {
  options = _.isFunction(options)
    ? options(defaultOptions())
    : _.defaults(options, defaultOptions());

  return function({ addComponents, e }) {
    addComponents([
      {
        ".btn": {
          display: "inline-block",
          padding: options.padding,
          fontSize: options.fontSize,
          fontWeight: options.fontWeight,
          lineHeight: options.lineHeight,
          borderRadius: options.borderRadius,
          border: options.border,
          textDecoration: "none"
        }
      },
      ..._.map(_.omit(options.sizes, "default"), (sizeOptions, name) => {
        return {
          [`.btn-${e(name)}`]: {
            padding: _.get(sizeOptions, "padding", options.padding),
            fontSize: _.get(sizeOptions, "fontSize", options.fontSize),
            fontWeight: _.get(sizeOptions, "fontWeight", options.fontWeight),
            lineHeight: _.get(sizeOptions, "lineHeight", options.lineHeight),
            borderRadius: _.get(
              sizeOptions,
              "borderRadius",
              options.borderRadius
            )
          }
        };
      }),
      ..._.map(options.colors, (colorOptions, name) => {
        return {
          [`.btn-${e(name)}`]: {
            backgroundColor: colorOptions.background,
            color: colorOptions.text,
            "&:focus": {
              outline: 0,
              boxShadow: `0 0 0 .2em ${Color(colorOptions.background)
                .alpha(0.5)
                .rgb()
                .toString()}`
            },
            "&:hover": {
              backgroundColor: _.get(
                colorOptions,
                "hoverBackground",
                Color(colorOptions.background)
                  .darken(0.1)
                  .hex()
                  .toString()
              ),
              color: _.get(colorOptions, "hoverText", colorOptions.text)
            },
            "&:active": {
              backgroundColor: _.get(
                colorOptions,
                "activeBackground",
                Color(colorOptions.background)
                  .darken(0.1)
                  .hex()
                  .toString()
              ),
              color: _.get(colorOptions, "activeText", colorOptions.text)
            }
          }
        };
      }),
      ..._.map(options.colors, (colorOptions, name) => {
        return {
          [`.btn-outline-${e(name)}`]: {
            borderColor: colorOptions.background,
            color: colorOptions.background,
            "&:focus": {
              outline: 0,
              boxShadow: `0 0 0 .2em ${Color(colorOptions.background)
                .alpha(0.5)
                .rgb()
                .toString()}`
            },
            "&:hover": {
              backgroundColor: _.get(
                colorOptions,
                "hoverBackground",
                Color(colorOptions.background)
                  .darken(0.1)
                  .hex()
                  .toString()
              ),
              color: _.get(colorOptions, "hoverText", colorOptions.text)
            },
            "&:active": {
              backgroundColor: _.get(
                colorOptions,
                "activeBackground",
                Color(colorOptions.background)
                  .darken(0.1)
                  .hex()
                  .toString()
              ),
              color: _.get(colorOptions, "activeText", colorOptions.text)
            }
          }
        };
      })
    ]);
  };
};