0

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:

Tailwind 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
  • 1,207
  • 1
  • 12
  • 52
  • If your new this might not be applicable, but some of the older versions of tailwind didn't include all the colours that we have today. – JDawwgy Sep 12 '22 at 23:05
  • Yeah I'd read that too and thought the same given I've just started. Looks to be the newest: `"tailwindcss": "^3.1.6"`? – NickW Sep 12 '22 at 23:21
  • Maybe I'll try white to black - *Edit: nope, no luck – NickW Sep 12 '22 at 23:22
  • If white to black works, what I like to do is add custom colours into a theme.json file – JDawwgy Sep 12 '22 at 23:25
  • Are your css changes being compiled? – JDawwgy Sep 12 '22 at 23:27
  • Just happened to see this tagged in another post, maybe it will help! https://stackoverflow.com/questions/67344478/tailwind-css-how-to-apply-background-image-with-linear-gradient – JDawwgy Sep 12 '22 at 23:37
  • Yeah, all css is compiling fine, and the div I'm applying the gradient to can have the `bg-red-700` class applied to it no problem. The post you linked looks interesting for when I just have to get it working (it looks like it fixes my suggested fix), but I'm still interested why the tailwind class wont' work https://tailwindcss.com/docs/background-image#background-images – NickW Sep 12 '22 at 23:51

1 Answers1

3

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.

NickW
  • 1,207
  • 1
  • 12
  • 52