Search code examples
csstailwind-csstailwind-in-js

How to apply background image with linear gradient in Tailwind CSS?

I want to apply a linear gradient to my background image. on tailwind config file I wrote a custom rule like this:

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('../src/images/icon-bg.jpg')",
  
      }),
    },
  },

It works. but when I try to apply a linear gradient it didn't woork.

For applying linear-gradient, what I have tried is this:

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        
         'hero-pattern':
          "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      }),
    },
  },

But it didn't work.

Solution

  • The problem is that you give hex color code within rgba. That's why the color is not applied.

    You have to give rgba color code instead of hex color code.

    Note: Hex color code inside rgba is only supported by SCSS.