CODEWITHSUNDEEP
reactjstailwind-css
RandomDeveloper
RandomDeveloper

Reputation: 883

Tailwind css background gradient not applying

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

Upvotes: 2

Views: 7372

Answers (1)

Raslan Ismail
Raslan Ismail

Reputation: 56

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: [],
}

Upvotes: 3

Related Questions