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
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")',
},
// ...
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.
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.
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))',
}
}
}
}
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>
