Tailwind not applying a gradient

Question

Update/TLDR: Not to do with webpack as I thought below - I was overwriting the gradient classes in the config by accident.

Is there any reason why a gradient like this one: bg-gradient-to-r from-purple-500 to-pink-500 would work in a codepen, but wouldn't apply to my project? (uses webpack and a tailwind config file).

I've read a couple of solutions based around changing the config file to set up custom colors, but I'm a bit confused as to why it wouldn't just work out of the box? The element seems to be working fine (it'll take a bg color for example), and the gradient appears to be applying the classes:

I mean I can get it to work like this I guess? But I'm learning Tailwind so was interested if I was missing something

@layer{
 .grad  {
   background-image: linear-gradient(to right, #a855f7, #ec4899);
  }
 }

*Update: added a small repo example here. I've added the gradient to the second section

**Update 2: This doesn't happen when not using webpack, the gradient class works fine then. See this minimal repo

NickW · Answer

Adding the answer in case someone else makes the same mistake.

So it turns out I'd accidently overwritten the gradient classes by using:

backgroundImage: {
  'hero-pattern-desktop': "url('/src/images/bg-header-desktop.png')",
  'hero-pattern-mobile': "url('/src/images/bg-header-mobile.png')"
},

outside of extend.

Credit to the Tailwind creator who got back to me real quickly: here.

Tailwind not applying a gradient

1 Answers