Update/TLDR: Surprisingly, the issue was not related to webpack as I initially suspected - it turns out I was accidentally overwriting the gradient classes in the configuration file.
What could be causing a gradient like this one:
bg-gradient-to-r from-purple-500 to-pink-500I have come across some solutions suggesting changes in the configuration file to define custom colors, but I am puzzled as to why it does not work out of the box. The element seems functional otherwise (it accepts background color changes, for example), and the classes for the gradient appear to be applied:
https://i.sstatic.net/psyil.png
Although I can make it work using this workaround, I am still new to Tailwind and wondering if I am overlooking something:
@layer{
.grad {
background-image: linear-gradient(to right, #a855f7, #ec4899);
}
}
*Update: I have included a small repository example here. The gradient has been added to the second section.
**Update 2: Interestingly, this issue does not arise when webpack is not used - the gradient class works perfectly then. Refer to this minimal repository for comparison.