tailwindcss/src/plugins/gradientColorStops.js

import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import { withAlphaValue } from '../util/withAlphaVariable'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'

function transparentTo(value) {
  return withAlphaValue(value, 0, 'rgba(255, 255, 255, 0)')
}

export default function () {
  return function ({ config, matchUtilities, addUtilities, theme, variants }) {
    let colorPalette = flattenColorPalette(theme('gradientColorStops'))

    if (config('mode') === 'jit') {
      matchUtilities({
        from: (modifier) => {
          let value = asValue(modifier, colorPalette)

          if (value === undefined) {
            return []
          }

          let transparentToValue = transparentTo(value)

          return {
            [nameClass('from', modifier)]: {
              '--tw-gradient-from': toColorValue(value, 'from'),
              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
            },
          }
        },
      })
      matchUtilities({
        via: (modifier) => {
          let value = asValue(modifier, colorPalette)

          if (value === undefined) {
            return []
          }

          let transparentToValue = transparentTo(value)

          return {
            [nameClass('via', modifier)]: {
              '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                value,
                'via'
              )}, var(--tw-gradient-to, ${transparentToValue})`,
            },
          }
        },
      })
      matchUtilities({
        to: (modifier) => {
          let value = asValue(modifier, colorPalette)

          if (value === undefined) {
            return []
          }

          return {
            [nameClass('to', modifier)]: {
              '--tw-gradient-to': toColorValue(value, 'to'),
            },
          }
        },
      })
    } else {
      const colors = colorPalette

      const utilities = _(colors)
        .map((value, modifier) => {
          const transparentToValue = transparentTo(value)

          return [
            [
              nameClass('from', modifier),
              {
                '--tw-gradient-from': toColorValue(value, 'from'),
                '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
              },
            ],
            [
              nameClass('via', modifier),
              {
                '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
                  value,
                  'via'
                )}, var(--tw-gradient-to, ${transparentToValue})`,
              },
            ],
            [
              nameClass('to', modifier),
              {
                '--tw-gradient-to': toColorValue(value, 'to'),
              },
            ],
          ]
        })
        .unzip()
        .flatten()
        .fromPairs()
        .value()

      addUtilities(utilities, variants('gradientColorStops'))
    }
  }
}