7

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

7
  • 1
    If you inspect the element are styles being applied to the classes? Commented Nov 19, 2020 at 14:44
  • Yes styles are applied to the elements. All the styles working fine except gradient Commented Nov 19, 2020 at 14:52
  • Is there something else that applies background color? It's hard to troubleshoot without seeing any of that. Commented Nov 19, 2020 at 14:56
  • If I apply background color to the nav item, it works fine but the gradient is not working. My code is correct or not ?? Commented Nov 19, 2020 at 15:01
  • Your code seems to be correct. Codepen Is there something in the NavLink component that is applying a style? Are you using an ancient version of tailwind css? Could you post a running example that shows the behavior you are having? Commented Nov 19, 2020 at 15:22

5 Answers 5

5

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")',
            },
            // ...
Sign up to request clarification or add additional context in comments.

Comments

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.

Comments

0

This should work fine (https://play.tailwindcss.com/xnQDaASzOL).

There might be an issue with you <NavLink /> component. Does the className props is goodly propagate to the inner component ?

Indeed, React does not understand className for custom component until you propagate it to the inner component, see this answer.

Comments

0

Add this to your tailwind.config.js file:

    module.exports = {
      content: ["./src/**/*.{js,jsx}"],
      theme: {
        extend: {
          backgroundImage: {
            'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
          }
        }
      }
    }

Comments

0

I had the same issue, tailwind config

export default {
 content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 theme: {
 extend: {
   backgroundImage: {
    landing: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/landing.jpg)',
    interior: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/interior.jpg)',
    church: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/church.jpg)',
   },
   },
},
plugins: [],
};

<div className="bg-landing"></div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.