Responsive Order Component Using Tailwind

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  BACKGROUND iMAGE 📸:

  • Looks like the background svg has not been properly set yet, So let me share my css snippet which helps you to easily apply the background color with the background svg they provided to place perfectly as same as design.

  ---

  • Add the following style rule to your css, and then experience the changes

  body {
  background: url(./images/pattern-background-desktop.svg) no-repeat, #E1E9Ff;
  background-size: contain;
  }
  

  ---

  • Tip, Don't forget to generate a new screenshot after editing the css file

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  UnFik•50

  @UnFikPosted over 1 year ago

  @0xAbdulKhalid ahh, I didn't realize there was an svg background, thanks!

  0
• 

  Gillian Akpeki•445

  @akpekigPosted over 1 year ago

  Arbitrary values and custom colours are quite different. You can set arbitrary values in the class of an element by putting the value in square brackets after the dash like so: <div class="w-[45%]">...</div>. Note that when using arbitrary values, you must include the unit.

  Custom colours are what you set in Tailwind's configuration. You can do this without any framework by including inline script in your HTML file's head. However, Tailwind literally describes itself as "utility-first" and "component-driven"; even though you can use it without a framework, it's very clearly intended to be used within one.

  Marked as helpful

  0

  ---

  

  UnFik•50

  @UnFikPosted over 1 year ago

  @akpekig Regarding the arbitrary value, I have tried it according to the documentation but for some reason it doesn't work, but for the tailwind config documentation it is very useful, thank you!

  0

  

  Gillian Akpeki•445

  @akpekigPosted over 1 year ago

  @UnFik Just tested it locally. It seems that arbitrary values also require the Tailwind module itself, meaning you have to add the script tag with Tailwind's CDN link in the HTML head for it to work.

  Marked as helpful

  0

  

  UnFik•50

  @UnFikPosted over 1 year ago

  @akpekig thank you! that solve the problem

  1