Responsive Advice Generator built with React, Vite and Tailwind

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  • Is there a way to set the custom styles (e.g colors) using tailwind?

    1. In your tailwind.config.js file you can define your own colors using the Tailwind CSS syntax:

    Under the extend key in the theme section, add the colors key and their custom colors:

    module.exports = {
      theme: {
         extend: {
            // Add the colors key
            colors: {
               // Configure your color theme here
            }
         }
      }
    }
    

    Result:

    module.exports = {
       content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {
          colors: {
            YOUR-CUSTOM-COLOR1: '#00f',
            YOUR-CUSTOM-COLOR2: '#0f0',
            primary: '#1fb6ff',
            secondary: '#334155',
          },
        },
      },
      variants: {},
      plugins: [],
    }
    

    2. Style your components using Tailwind classes:

    <div className="bg-primary text-secondary">Hello World!</div>
    

    You can read more about Customizing Colors here

  Other suggestions:

  • Adding functionality to non-interactive elements like div or img is not recommended because they are not designed to be interactive. You should use interactive elements like button to make your elements interactive.

  • There is another problem after changing from a div to a button: There isn't much information about what the button is for, and dice as the alt attribute value is not very descriptive, screen reader users will hear "Button, dice" and they won't understand what the button does. You can use Generate new advice as the alt attribute value. You can see an example here.

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

  Happy coding!

  Marked as helpful

  1