Responsive Order Summary Component made using ReactJs and Tailwindcss

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Images should have an alt attribute. If they don't, some screen readers might read the filename, and "llustration-hero.svg"" isn't informative. if the image is purely decorative, you can leave the alt attribute empty.

  • Consider using Prettier with a Prettier plugin for Tailwind CSS to automatically format and organize your classes, enhancing code readability. Learn more about automatic class sorting with Prettier in this Tailwind CSS blog post

  • I noticed you used variables in the :root selector. In Tailwind CSS, you can easily define custom colors to ensure consistency throughout your design.

    In your Tailwind CSS configuration file (usually tailwind.config.js), you can define custom colors under the extend section. For example:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
       content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
       ],
      theme: {
        extend: {
          colors: {
            'custom-blue': '#007acc',
            'custom-green': '#00b894',
            // Add more custom colors as needed
          },
        },
     },
      plugins: [],
    }
    

    Once you've defined your custom colors, you can use them in your HTML just like any other Tailwind utility class:

    <p class="bg-custom-blue text-custom-green">Custom Colors</p>
    

    For a more detailed guide and additional options, I recommend checking out this resource on Tailwind's official documentation: Using Custom Colors.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1
• 

  Diyorbek•330

  @diyorbek-alikuzievPosted 11 months ago

  django

  0