1# Rule Catalog — Code Quality
2 
3## Conditional class names use utility function
4 
5IsUrgent: True
6Category: Code Quality
7 
8### Description
9 
10Ensure conditional CSS is handled via the shared `classNames` instead of custom ternaries, string concatenation, or template strings. Centralizing class logic keeps components consistent and easier to maintain.
11 
12### Suggested Fix
13 
14```ts
15import { cn } from '@/utils/classnames'
16const classNames = cn(isActive ? 'text-primary-600' : 'text-gray-500')
17```
18 
19## Tailwind-first styling
20 
21IsUrgent: True
22Category: Code Quality
23 
24### Description
25 
26Favor Tailwind CSS utility classes instead of adding new `.module.css` files unless a Tailwind combination cannot achieve the required styling. Keeping styles in Tailwind improves consistency and reduces maintenance overhead.
27 
28Update this file when adding, editing, or removing Code Quality rules so the catalog remains accurate.
29 
30## Classname ordering for easy overrides
31 
32### Description
33 
34When writing components, always place the incoming `className` prop after the component’s own class values so that downstream consumers can override or extend the styling. This keeps your component’s defaults but still lets external callers change or remove specific styles.
35 
36Example:
37 
38```tsx
39import { cn } from '@/utils/classnames'
40 
41const Button = ({ className }) => {
42  return <div className={cn('bg-primary-600', className)}></div>
43}
44```
45