Wanna customize Gradient and add in tailwind config js file

[h0lme3]

Hi,
How can I customize gradient and add tailwind configuration object?
i.e. I have plenty of chances to use gradient - bg-gradient-to-r from-color to-color
I dont hate to use bg-gradient-to-r from-color to-color in all div tags. so want to simplify it a bit.
lLke bg-gradient-primary. It would be add in tailwind config, maybe

#tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Any solution?? Thanks in advance!!

[crswll]

You can extend backgroundImage in your tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'gradient-primary': `linear-gradient(to right, ${theme('colors.pink')}, ${theme('colors.orange')})`,
      }),
    },
  },
  plugins: [],
}

[h0lme3]

You can extend backgroundImage in your tailwind.config.js.

module.exports = {
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'gradient-primary': `linear-gradient(to right, ${theme('colors.pink')}, ${theme('colors.orange')})`,
      }),
    },
  },
  plugins: [],
}

Hi @crswll
You are right, It works good on my end.
Can I try it with gradientColorStops in tailwind config?

[crswll]

Using gradientColorStops you'd still need to set multiple classes. I don't think there's any way straight-forward way to make it into a single class through that.

You can do something like:

.gradient-primary {
  --tw-gradient-stops: theme("colors.rose.400"), theme("colors.cyan.400"), theme("colors.purple.600");
}

and do

<div class="bg-gradient-to-br gradient-primary">...</div>

but not sure this really helps with your original goal.

[h0lme3]

Actually I did not want it. :)
Btw, I got something a lot from you.
Thanks though!

[h0lme3]

TBH, I did want to know how to do gradientColorStops in tailwind config
https://v2.tailwindcss.com/docs/gradient-color-stops