Issue with tailwind css gradient

Question

I am trying to apply gradient to my nav links but it is not showing any results. This is my code

<NavLink className="block p-4 pr-0 mr-3 bg-gradient-to-br from-purple-500 
  to-indigo-500 rounded-tr-full rounded-br-full text-textPrimary 
  hover:text-white text-xl" to="/dashboard">
    <i class="fas fa-laptop-house mr-3"></i>
    Dashboard
</NavLink>

I am using tailwind css and react

Answer 1

This would happen if you have customized the tailwind.config.js by "overriding" related properties instead of "extending" them.

E.g. if you have overwritten (overridden) the colors or backgroundImage property, then the original colors / backgroundImage presets are not available anymore.

E.g. the gradients (which create CSS "background-images") aren't available anymore if you have added some background image like this (an overridden property):

module.exports = {
    // ...
    theme: {
        backgroundImage: {
            'someImage': 'url("/images/some-image.png")',
        },
        extend: {
            // ...

You should move this customization into extend, like this:

module.exports = {
    // ...
    theme: {
        extend: {
            backgroundImage: {
                'someImage': 'url("/images/some-image.png")',
            },
            // ...

Answer 2

It looks like there is no color schema in your config.

Just add this to your tailwind.config.js.

const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      blue: {
        ...colors.blue,
        "your custom blue color"
      },
      green: colors.green,
      pink: colors.pink
      ...etc
    }
  },
};

It should work. Just pick colors you want to include in your schema. ...colors.blue will give you all shades of blue. After this, gradient with blue color should work.