Tailwind UI component patterns: composition over configuration

Tailwind UI components are copied into a project as static HTML. As the design evolves, the same pattern is duplicated across dozens of files and updates require finding every instance manually.

Extract Tailwind patterns into framework components and compose them:

// Composable Card component
function Card({ className, children }) {
  return (
    <div className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}>
      {children}
    </div>
  );
}

function CardHeader({ className, children }) {
  return (
    <div className={cn('flex flex-col space-y-1.5 p-6', className)}>{children}</div>
  );
}

function CardContent({ className, children }) {
  return <div className={cn('p-6 pt-0', className)}>{children}</div>;
}

// Usage
<Card>
  <CardHeader><h3 className="font-semibold">Title</h3></CardHeader>
  <CardContent><p>Content</p></CardContent>
</Card>

This is the pattern used by shadcn/ui — compound components with className passthrough via twMerge.

Abstracting Tailwind patterns into components maintains DRY while keeping full utility-class visibility. The className passthrough pattern (with twMerge) preserves the ability to override without fighting specificity.

When building a component library or design system on top of Tailwind CSS.