styling

TailwindCSS Styling Guidelines

This project uses TailwindCSS 4 with specific patterns and constraints.

Critical Rule: No Dynamic Classes

All Tailwind classes must be statically defined - no dynamic className values:

// ❌ Wrong - Dynamic class construction
const size = 'large'
const className = `text-${size}` // This won't work with Tailwind purging

// ❌ Wrong - Template literals with variables
const color = 'blue'
const className = `bg-${color}-500`

// ✅ Correct - Static classes with conditional logic
const className = clsx({
  'text-base': size === 'small',
  'text-lg': size === 'medium',
  'text-xl': size === 'large',
})

// ✅ Correct - Predefined class mappings
const sizeClasses = {
  small: 'text-base',
  medium: 'text-lg',
  large: 'text-xl',
}
const className = sizeClasses[size]

Class Utility Function

Use the cn() utility from src/lib/cn.ts for combining classes:

import { cn } from '~/lib/cn'

function Button({ className, variant = 'primary', ...props }) {
  return (
    <button
      className={cn(
        // Base styles
        'px-4 py-2 rounded-md font-medium transition-colors',
        // Variant styles
        {
          'bg-primary text-white hover:bg-primary/90': variant === 'primary',
          'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
          'border border-border bg-background hover:bg-fill': variant === 'outline'
        },
        // External className override
        className
      )}
      {...props}
    />
  )
}

Color System Integration

Always use Pastel colors (see color.mdc rule):

// ✅ Use Pastel semantic colors
<div className="bg-background text-text border border-border">

// ✅ Use Pastel application colors
<button className="bg-primary text-white">

// ✅ Use Pastel fill colors for interactive elements
<input className="bg-fill border border-border">

Responsive Design Patterns

// Mobile-first responsive design
<div className="w-full md:w-1/2 lg:w-1/3">

// Responsive spacing
<div className="p-4 md:p-6 lg:p-8">

// Responsive typography
<h1 className="text-2xl md:text-3xl lg:text-4xl">