Cursor rule

1---
2description: # Guidelines for Styling
3globs: 
4alwaysApply: false
5---
6# Guidelines for Styling
7 
8## Purpose and Overview
9These styling guidelines ensure consistency, readability, and maintainability across the project's components. By following these conventions, we maintain a clean and organized codebase that's easier to understand and modify.
10 
11## Tailwind CSS Usage
12 
13### Class Organization
14When using the `cn()` utility function to combine Tailwind classes, group related classes on separate lines by their purpose:
15 
16NOTE: Only group the classes if there's a psuedo classes involve
17 
18```tsx
19className={cn(
20  // Layout and dimensions
21  'box-border h-[44px] w-full md:w-full',
22  // Borders and corners
23  'rounded-2xl border border-base-400',
24  // Spacing and padding
25  'px-3 md:px-4',
26  // Typography and colors
27  'placeholder:text-base-400',
28  // States (focus, hover, active)
29  'focus:border-[2px] focus:border-primary-focus focus:outline-none focus:ring-0',
30  // Conditional states (disabled, checked, etc.)
31  'disabled:border-base-400 disabled:bg-white disabled:text-base-400',
32  // External classes passed as props
33  className
34)}
35```
36 
37### Grouping Principles
38Group Tailwind classes by these categories:
391. **Layout & Sizing**: `flex`, `grid`, `w-`, `h-`, `max-w-`, etc.
402. **Positioning**: `relative`, `absolute`, `inset-`, etc.
413. **Borders & Corners**: `border-`, `rounded-`, etc.
424. **Spacing**: `p-`, `m-`, `gap-`, etc.
435. **Typography**: `text-`, `font-`, etc.
446. **Colors & Backgrounds**: `bg-`, `text-color`, etc.
457. **State Variants**: `hover:`, `focus:`, `active:`, etc.
468. **Conditional Variants**: `disabled:`, `dark:`, etc.
479. **External Classes**: Always include the `className` prop last
48 
49## Responsive Design Approach
50 
51### Mobile-First Design
52Follow a mobile-first approach with responsive breakpoints:
53 
54```tsx
55className={cn(
56  // Mobile (default)
57  'w-full p-2 text-sm',
58  // Medium screens (md)
59  'md:w-auto md:p-4 md:text-base',
60  // Large screens (lg)
61  'lg:p-6 lg:text-lg'
62)}
63```
64 
65### Media Query Grouping
66Group responsive classes by breakpoint rather than by property type for complex components. This improves readability by making it easy to see all styles that apply at each breakpoint:
67 
68```tsx
69className={cn(
70  // Base styles (mobile)
71  'flex flex-col w-full p-4 text-sm rounded-md bg-white',
72  // Small screens (sm)
73  'sm:flex-row sm:gap-4 sm:p-5 sm:text-base',
74  // Medium screens (md)
75  'md:gap-6 md:p-6 md:rounded-lg',
76  // Large screens (lg)
77  'lg:max-w-5xl lg:p-8 lg:gap-8',
78  // Larger screens (lg)
79  'xl:max-w-full xl:p-10 xl:gap-8',
80  // External classes
81  className
82)}
83```
84 
85## Implementation Examples
86 
87### Button Component Example
88```tsx
89<button
90  className={cn(
91    // Base styles
92    'inline-flex items-center justify-center',
93    'h-10 px-4 py-2',
94    'rounded-md text-sm font-medium',
95    'transition-colors focus-visible:outline-none focus-visible:ring-2',
96    // Variant styles
97    variant === 'default' && 'bg-primary text-white hover:bg-primary-focus',
98    variant === 'outline' && 'border border-base-400 hover:bg-base-100',
99    // Size styles
100    size === 'sm' && 'h-8 px-3 text-xs',
101    size === 'lg' && 'h-12 px-6 text-base',
102    // Responsive styles
103    'w-full sm:w-auto',
104    'text-sm md:text-base',
105    // Disabled state
106    disabled && 'opacity-50 cursor-not-allowed',
107    // External classes
108    className
109  )}
110>
111  {children}
112</button>
113```
114 
115### Card Component Example
116```tsx
117<div
118  className={cn(
119    // Base layout and spacing
120    'w-full p-4',
121    // Responsive layout
122    'md:p-6 lg:p-8',
123    'sm:flex sm:gap-4 md:gap-6',
124    // Borders and shadows
125    'rounded-lg border border-base-200 shadow-sm',
126    // Background and text colors
127    'bg-white text-base-900',
128    // Hover state
129    'hover:shadow-md transition-shadow duration-200',
130    // External classes
131    className
132  )}
133>
134  {children}
135</div>
136```