log / fixed tailwind

I found tweet that shared a fixed tailwind by adding additional component class and I think its really good idea and can be used to help in development using tailwindcss ✨👍.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .debug {
    @apply border border-red-500;
  }

  .horizontal {
    @apply flex flex-row;
  }

  .vertical {
    @apply flex flex-col;
  }

  .horizontal.center-v {
    @apply items-center
  }

  .horizontal.center-h {
    @apply justify-center
  }

  .horizontal.center {
    @apply justify-center items-center;
  }

  .vertical.center-v {
    @apply justify-center;
  }

  .vertical.center-h {
    @apply items-center;
  }

  .vertical.center {
    @apply justify-center items-center;
  }

  .space-between {
    @apply justify-between;
  }
}
Written on 2024-03-17 22:47:00 +0700 Edited on 2024-03-17 22:54:00 +0700