---
description: Tailwind CSS and UI component guidelines
globs: "**/*.{ts,tsx,css}"
---

# Tailwind & UI Rules

## Core Principles
- Use mobile-first responsive design
- Use Shadcn UI components from @chaingraph/ui
- Follow design system tokens
- Use lucide-react icons

## Component Patterns
```tsx
import { cn } from '@chaingraph/utils'
import { cva } from 'class-variance-authority'

const buttonVariants = cva(
  'rounded-md font-medium transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-primary text-white hover:bg-primary/90',
        secondary: 'bg-secondary text-white hover:bg-secondary/90'
      }
    },
    defaultVariants: {
      variant: 'default'
    }
  }
)

function Button({ 
  className, 
  variant, 
  ...props 
}: ButtonProps) {
  return (
    <button 
      className={cn(buttonVariants({ variant }), className)}
      {...props}
    />
  )
}
```