Tailwind CSS

Community feedback

• 

  Boots 😺•1,610

  @adityaphasu

  Posted almost 2 years ago

  Hello!

  The issue you are experiencing is due to the background image repeating. By default, a background-image is repeated both vertically and horizontally therefore to avoid this generally in CSS background-repeat:no-repeat is used but since you are using tailwind you can add bg-no-repeat to the div.

  • You can add bg-[hsl(225, 100%, 94%)] (this is the pale blue color from the style guide) which will also apply a background color so it matches the design.

  Few tips while for tailwindcss to use upon the next project:

  • Instead of using inline style to add the background images using tailwind you can actually use the tailwind.config.js to add those images and use them simply using tailwind classes. This is how you do it:

  module.exports = {
    theme: {
      extend: {
        backgroundImage: {
          "desktop-pattern": "url('/images/pattern-background-desktop.svg')",
          "mobile-pattern": "url('/images/pattern-background-mobile.svg')",
      }
      }
    }
  }
  

  • After adding these you can in the html file just use bg-desktop-pattern or bg-mobile-pattern and the background image would get applied!
  • You can actually do the same thing for colors and various other properties as well. The config file is there to add custom values so that we can use them in a tailwind fashion.
  • Here give this page a read from docs to know more about it!

  Keep up the hard work and happy coding!🙂

  11

  Marked as helpful