Tailwind css background gradient not applying

user_11207965 0
Viewed 3734

My tailwind background gradient is not being applied

here is my html code:

<div>
   <button className="bg-gradient-to-r from-primary-orange via-secondary-orange to-lighter-orange w-4/5 p-4 mt-10 rounded">Search Flights</button>
</div>

My tailwind.config.js:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      'primary-orange': '#FF8C00',
      'secondary-orange':'#FFA500',
      'lighter-orange':'#FFD700'
     })
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Running my react script with post-css so all the other colors I add to tailwind.config are working once I generate the post-css just not the gradient.

Any idea why?

Thanks

tailwind-css reactjs
1 Answers

Use the extend section of your tailwind.config.js file if you'd like to extend the default color palette rather than override it. Then add gradientColorStops attribute to it where you can write your custom colors.

module.exports = {
    purge: [],
    darkMode: false, 
    theme: {
        extend: {
            gradientColorStops: theme => ({
                'primary': '#FF8C00',
                'secondary': '#FFA500',
                'danger': '#FFD700',
            }),
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
}
user_86487970
Related