<100 subscribers
<span className={cn(
"px-2 py-1",
"text-xs",
"text-black/50",
"bg-white/70",
"rounded-sm rounded-tr-none rounded-br-none",
)}>{"(at a minimum!)"}</span>
Follow best practices for React, TypeScript, and modern JavaScript.
Prefer functional components and hooks.
When writing CSS or Tailwind code, use the cn
helper function from src/lib/utils.ts
if there are multiple or conditional classNames for an HTML element.
Do not concatenate className strings manually or use template literals for className props when there are many classes or conditions.
Example:
// Good:
<div className={cn('bg-red-500', isActive && 'font-bold', className)} />
// Avoid:
<div className={isActive ? 'bg-red-500 font-bold' : 'bg-red-500'} />
<div className={`bg-red-500 ${isActive ? 'font-bold' : ''} ${className}`} />
The cn
helper combines clsx
and tailwind-merge
for best-in-class className merging and deduplication.
Use absolute imports from the src
directory (e.g., @/components/Chip
).
Add more rules as the codebase evolves.
cursor agent ignores the rule and exclusively uses plain Tailwind classes when writing code; doesn't use the cn
helper function as per code styling context - what am i doing wrong?