Tailwind CSS background-image gradients plugin

gradients.js

const _ = require('lodash');

module.exports = ({e, addUtilities, config}) => {
  const gradients = config('gradients', [])
  const variants = config('modules.gradients')

  const gradientUtilities = _.map(gradients, (colors, name) => {
    if (!_.isArray(colors)) {
      colors = ['transparent', colors];
    }

    return {
        [`.${e(`bg-gradient-to-top-${name}`)}`]: { backgroundImage: `linear-gradient(to top, ${colors.join(', ')})` },
        [`.${e(`bg-gradient-to-right-${name}`)}`]: { backgroundImage: `linear-gradient(to right, ${colors.join(', ')})` },
        [`.${e(`bg-gradient-to-bottom-${name}`)}`]: { backgroundImage: `linear-gradient(to bottom, ${colors.join(', ')})` },
        [`.${e(`bg-gradient-to-left-${name}`)}`]: { backgroundImage: `linear-gradient(to left, ${colors.join(', ')})` },
      }

  })

  if (variants) {
    addUtilities(gradientUtilities, {
      variants: variants,
    })
  }
}

tailwind.js

/*

Based on https://github.com/benface/tailwindcss-gradients

For Gist's sake, most of this file has been truncated.

*/

module.exports = {

  colors: colors,
  
  // define gradient utilities
  gradients: {
    'red': '#f00',
    'red-blue': ['#f00', '#00f'],
    'red-green-blue': ['#f00', '#0f0', '#00f'],
  },  

  // etc. etc.

  modules: {
    appearance: ['responsive'],
    // [...]
    fontWeights: ['responsive', 'hover', 'focus'],
    gradients: ['responsive', 'hover'], // add the variants here
    height: ['responsive'],
    leading: ['responsive'],
    // etc. etc.
  },


  /*
  |-----------------------------------------------------------------------------
  | Plugins                                https://tailwindcss.com/docs/plugins
  |-----------------------------------------------------------------------------
  |
  | Here is where you can register any plugins you'd like to use in your
  | project. Tailwind's built-in `container` plugin is enabled by default to
  | give you a Bootstrap-style responsive container component out of the box.
  |
  | Be sure to view the complete plugin documentation to learn more about how
  | the plugin system works.
  |
  */

  plugins: [
    require('./plugins/container')({
      // center: true,
      // padding: '1rem',
    }),
    require('./plugins/gradients') // require the plugin file
  ],


  /*
  |-----------------------------------------------------------------------------
  | Advanced Options         https://tailwindcss.com/docs/configuration#options
  |-----------------------------------------------------------------------------
  |
  | Here is where you can tweak advanced configuration options. We recommend
  | leaving these options alone unless you absolutely need to change them.
  |
  */

  options: {
    prefix: '',
    important: false,
    separator: ':',
  },

}