This card uses custom classes (
.custom-card
,
.custom-card-title
) defined with
@apply
. This is a reasonable use for a small, self-contained abstraction.
This card uses direct Tailwind utility classes in the HTML. Notice how all styles are immediately visible and modifiable here.
Imagine a class like
.overly-complex-component-style
(defined in
<style>
but not used here for brevity) that combines dozens of utilities. While it centralizes the styles, debugging or modifying a specific utility for just one instance of that "component" becomes harder. You lose the granular control and visibility that utility classes offer directly in the HTML.
Key Takeaway:
Use
@apply
for small, genuinely reusable patterns (like
.btn-primary
or simple alert styles), not for building large, complex component-like abstractions that hide too many utility details. For those, consider component-based architecture with JS frameworks.