Blogr landing page with react and tailwind.

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello, @AbieroAlvin!

  Since you are using TailwindCSS the one way you can apply background images with gradients is to actually add them to the config file inside backgroundImage like this:

   backgroundImage: {
          "pattern-mobile-gradient":
            'url("../src/images/bg-pattern-intro-mobile.svg"), linear-gradient(to bottom, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))',
          "pattern-desktop-gradient":
            'url("../src/images/bg-pattern-intro-desktop.svg"), linear-gradient(to right, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))',
          "pattern-circles-gradient":
            'url("../src/images/bg-pattern-circles.svg"), linear-gradient(to bottom, hsl(237, 17%, 21%) , hsl(237, 23%, 32%))',
        },
  

  • It's basically using a combination of image and gradient and then using it as a background (bg-[your name for the custom background set in config])
  • Though after using this you might want to manage the sizes, position of the gradient and image separately in your CSS file instead using , in the properties.

  I think you can manage sizes and position using tailwind CSS too but I think it would lead to quite unreadble code in the jsx files hence I said to use CSS file to manage those.

  Here is the link to my solution. I have also used tailwindcss so you can see how I have done it.

  Good luck and happy coding!🙌🏻

  Marked as helpful

  0