11

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ashik
  • 2,888
  • 8
  • 28
  • 53
  • According to docs you only need to add background image to config file. you can use the `linear-gradient` classes directly in your element. https://tailwindcss.com/docs/background-image#background-images – miraj May 01 '21 at 09:22

3 Answers3

18

don't use function. just try as a utility

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

here is a working example https://play.tailwindcss.com/uHp6pKIKEc

miraj
  • 546
  • 3
  • 12
  • Any way to do this using utility classes? Not being able to use the `background` shorthand syntax seems like a shortcoming. – ha404 Jan 05 '23 at 19:37
7

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ashik
  • 2,888
  • 8
  • 28
  • 53
7

You don't have to tweak config file; Use the following class:

bg-[linear-gradient(to_right_bottom,rgba(49,84,44,0.8),rgba(16,71,52,0.8)),url('../src/images/icon-bg.jpg')]
Tsutomu
  • 4,848
  • 1
  • 46
  • 68