To configure the linear-gradient in tailwind CSS

To add the below code with diffrent linear gradient in side tailwind.config.js

 backgroundImage: (theme) => ({
        'blueshadehome': 'linear-gradient(180deg, rgba(99, 171, 163, 0.75) 0%, #8099F3 95.17%)',
        'orangeshadehome': 'linear-gradient(180deg, #FF9900 0%, rgba(255, 168, 0, 0.63) 100%)',
        'pinkshadehome': 'linear-gradient(180deg, #DC5988 0%, rgba(212, 53, 168, 0.66) 100%)',
        'greenshadehome': 'linear-gradient(180deg, rgba(36, 118, 99, 0.9) 0%, rgba(153, 215, 155, 0.9) 31.17%)',
        'violetshadehome': 'linear-gradient(180deg, #58608B 0%, #CAD0F2 100%)',
        'oliveshadehome': 'linear-gradient(180deg, #70800F 0%, #CDD5A2 100%)',
      }),

in below format

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {


    extend: {
    
      backgroundImage: (theme) => ({
        'blueshadehome': 'linear-gradient(180deg, rgba(99, 171, 163, 0.75) 0%, #8099F3 95.17%)',
        'orangeshadehome': 'linear-gradient(180deg, #FF9900 0%, rgba(255, 168, 0, 0.63) 100%)',
        'pinkshadehome': 'linear-gradient(180deg, #DC5988 0%, rgba(212, 53, 168, 0.66) 100%)',
        'greenshadehome': 'linear-gradient(180deg, rgba(36, 118, 99, 0.9) 0%, rgba(153, 215, 155, 0.9) 31.17%)',
        'violetshadehome': 'linear-gradient(180deg, #58608B 0%, #CAD0F2 100%)',
        'oliveshadehome': 'linear-gradient(180deg, #70800F 0%, #CDD5A2 100%)',
      }),
     
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ],
}


Leave a comment

Your email address will not be published. Required fields are marked *