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.

*/

let gradients = {
  'grey-dark': ['#b8c2cc', '#8795a1'],
  'red-dark': ['#e3342f', '#cc1f1a'],
  'orange-dark': ['#f6993f', '#de751f'],
  'yellow-dark': ['#ffed4a', '#f2d024'],
  'green-dark': ['#38c172', '#1f9d55'],
  'teal-dark': ['#4dc0b5', '#38a89d'],
  'blue-dark': ['#3490dc', '#2779bd'],
  'indigo-dark': ['#6574cd', '#5661b3'],
  'purple-dark': ['#9561e2', '#794acf'],
  'pink-dark': ['#f66d9b', '#eb5286'],
}

module.exports = {

  colors: colors,
  
  // define gradient utilities
  gradients: gradients,  

  // 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: ':',
  },

}