Order summary component with Tailwind

Community feedback

• 

  Muhammad Waleed Ahmed•270

  @WDWaleedPosted about 1 year ago

  Hi there. For images, you should directly specify them in the src attribute of the img tag but for background images you can configure the tailwind config file by extending the theme:

  theme: {
        extend: {
            backgroundImage: {
                  TheImg: "url('/images/the-img.png')"
            }
        }
  }
  

  After this, you can use it in your classes like this:

  class="bg-TheImg"
  

  I hope this helps, but if not then let me know and I'll look for a different approach.

  If you like, here is a real-world example from one of my projects but I use ReactJS so it has a different setup. Just note the extended theme in the tailwind config:

  /** @type {import('tailwindcss').Config} */
  export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
      extend: {
        screens: {
          custom: "750px",
        },
        colors: {
          Cyan: "hsl(176, 68%, 64%)",
          Blue: "hsl(198, 60%, 50%)",
          LightRed: "hsl(0, 100%, 63%)",
          IntroBack: "hsl(217, 28%, 15%)",
          MainBack: "hsl(218, 28%, 13%)",
          Footer: "hsl(216, 53%, 9%)",
          TestimonialsBack: "hsl(219, 30%, 18%)",
        },
        backgroundImage: {
          Intro: "url('/images/illustration-intro.png')",
          CurvyDesktop: "url('/images/bg-curvy-desktop.svg')",
          CurvyMobile: "url('/images/bg-curvy-mobile.svg')",
          ProductiveIllustration:
            "url('/images/illustration-stay-productive.png')",
          Arrow: "url('/images/icon-arrow.svg')",
          Quotes: "url('/images/bg-quotes.png')",
        },
        fontFamily: {
          Raleway: ["Raleway", "sans-serif"],
          OpenSans: ["'Open Sans'", "sans-serif"],
        },
      },
    },
    plugins: [],
  };
  
  

  0