Order summary component using tailwindcss

Community feedback

• 

  Antoine C•1,210

  @mattari97Posted over 2 years ago

  Hello. Nice one!

  A little advice on tailwind. I see that you added a custom component like so

  @tailwind base;
  @tailwind components;
  .btn{
    @apply  w-full rounded-xl p-3 mb-4 font-bold;
  }
  @tailwind utilities;
  

  The recommended way to target a specific layer is to use the @layer directive like so:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @layer components {
    .btn{
      @apply  w-full rounded-xl p-3 mb-4 font-bold;
    }
  }
  

  This way you don't have to worry on putting your custom classes before importing the @utilities and when you'll have more custom classes it will make the code more readable. Also you can easily split your styles in multiple sheets and still import them like so:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  @import "custom-classes"
  

  Peace.

  Marked as helpful

  0