Demonstrating the "Gotcha" with @apply

Card Styled with @apply :

Card Title (@apply)
This card uses .custom-card , .custom-card-header , and .custom-card-body classes defined with @apply . The HTML is less verbose for this specific component.
Footer with @apply
Using @apply here: Hides the underlying Tailwind utilities (e.g., bg-white , shadow-xl , p-6 ) from the HTML. You need to check the CSS to see the actual styles.

Card Styled with Direct Utilities:

Card Title (Utilities)
This card is styled using direct Tailwind utility classes in the HTML. The HTML is more verbose, but all styles are immediately visible.
Footer with utilities
Using direct utilities here: All styling logic ( bg-white , shadow-xl , p-6 , etc.) is present in the HTML, aligning with the utility-first approach.

"Gotcha" - Overusing @apply :

The "Gotcha" with @apply is that overusing it can lead you back towards a more traditional CSS workflow. While it's handy for small, truly reusable utility-like abstractions (e.g., a consistent button style), creating many complex component classes with @apply can:

Recommendation: For larger applications or complex, reusable UI elements, building true components with a JavaScript framework (like React, Vue, Svelte, or Angular) is generally preferred. These components can encapsulate markup and use Tailwind's utility classes directly within them, offering better structure and maintainability than heavy @apply usage.

Use @apply judiciously for small, self-contained utility-like abstractions where the benefits of DRY (Don't Repeat Yourself) outweigh the loss of direct utility visibility in the HTML.