RESULTS SUMMARY COMPONENT

Community feedback

• 

  P

  Ehsan Tatasadi•1,780

  @tatasadiPosted 10 months ago

  Hey Reydel,

  Congratulations on completing this challenge! Your work is commendable. I've got a suggestion that could enhance your project even further.

  Consider moving color values, such as gradients, text colors, and background colors, to your Tailwind CSS config file. This practice not only aligns with best coding practices but also provides you with a centralized location to manage your project's color scheme. Here's a quick example of how you can structure your Tailwind CSS config file:

  import type { Config } from 'tailwindcss'
  
  export default {
    content: ['./app/**/*.{js,jsx,ts,tsx}'],
    theme: {
      extend: {
        colors: {
          // Primary
          'light-red': 'hsl(0, 100%, 67%)',
          'orangey-yellow': 'hsl(39, 100%, 56%)',
          'green-teal': 'hsl(166, 100%, 37%)',
          'cobalt-blue': 'hsl(234, 85%, 45%)',
  
          //backgrounds
          'very-light-red': 'hsl(6, 100%, 98%)',
          'very-light-orange': 'hsl(42, 100%, 97%)',
          'very-light-green': 'hsl(173, 53%, 97%)',
          'very-light-blue': 'hsl(240, 71%, 97%)',
  
          // gradients
          'light-slate-blue-bg': 'hsl(252, 100%, 67%)', // Background
          'light-royal-blue-bg': 'hsl(241, 81%, 54%)', // Background
          'violet-blue-circle': 'hsla(256, 72%, 46%, 1)', // Circle
          'persian-blue-circle': 'hsla(241, 72%, 46%, 0)', // Circle
  
          // Neutral
          'pale-blue': 'hsl(221, 100%, 96%)',
          'light-lavender': 'hsl(241, 100%, 89%)',
          'dark-gray-blue': 'hsl(224, 30%, 27%)',
          'very-light-blue': 'hsl(220, 100%, 96%)',
        },
      },
      fontFamily: {
        'hanken-grotesk': ['Hanken Grotesk', 'sans-serif'],
      },
    },
    plugins: [],
  } satisfies Config
  

  This practice allows you to easily manage and modify colors in the future. In your HTML, you can then use these colors like this: class="text-dark-gray-blue bg-very-light-blue".

  I hope you find this suggestion helpful for your ongoing projects. Great job on the challenge, and keep up the excellent work!

  0