newsletter-sign-up-form

Community feedback

• 

  Joshua Lester Pepito•150

  @jasterpepito11

  Posted 3 months ago

  Hello!

  Great job with doing almost identical to the design! Code is also pretty neat. The thing that I can suggest that might be helpful if you continue to develop using tailwind is to take advantage of their @layer and @apply directives. This is especially useful for styling components such as buttons, etc. For example, it can get tedious to type

  className="pt-[1.125rem] pb-[.875rem] pl-12 pr-[2.875rem] desktop:px-0 desktop:w-full bg-darkNavy active:bg-custom-gradient text-bodyBold text-white rounded-lg" for every button.

  Instead, you can use:

  @layer components {
      .form-btn {
        @apply pt-[1.125rem] pb-[.875rem] pl-12 pr-[2.875rem] desktop:px-0 desktop:w-full bg-darkNavy active:bg-custom-gradient text-bodyBold text-white rounded-lg;
      }
  }
  

  And in the html part you can just simplify it with your customized class form-btn like this: className="form-btn"

  The advantage of using these @layer directives is that you can group a set of pre-defined classes and use it to create your configured component classes that can be used, also it can help with the readability especially when your app gets bigger.

  That's all. Have a nice day!

  00