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 ✨👍.

there, I fixed tailwind pic.twitter.com/XV9KN5lRFB

— kitze 🚀 (@thekitze) March 16, 2024

 1@tailwind base;
 2@tailwind components;
 3@tailwind utilities;
 4
 5@layer components {
 6  .debug {
 7    @apply border border-red-500;
 8  }
 9
10  .horizontal {
11    @apply flex flex-row;
12  }
13
14  .vertical {
15    @apply flex flex-col;
16  }
17
18  .horizontal.center-v {
19    @apply items-center
20  }
21
22  .horizontal.center-h {
23    @apply justify-center
24  }
25
26  .horizontal.center {
27    @apply justify-center items-center;
28  }
29
30  .vertical.center-v {
31    @apply justify-center;
32  }
33
34  .vertical.center-h {
35    @apply items-center;
36  }
37
38  .vertical.center {
39    @apply justify-center items-center;
40  }
41
42  .space-between {
43    @apply justify-between;
44  }
45}