6

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.

4

2 に答える 2

9

関数を使用しないでください。ユーティリティとして試してみてください

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

これが実際の例ですhttps://play.tai​​lwindcss.com/uHp6pKIKEc

于 2021-05-01T11:20:57.077 に答える