Как организовать процесс работы над задачами?

Как организуешь стили проекта?

Структура Tailwind CSS + компоненты

frontend/src/
├── app/
│   └── globals.css (Tailwind директивы, @theme)
├── components/
│   ├── ui/
│   │   ├── Button.tsx (базовые компоненты)
│   │   ├── Card.tsx
│   │   └── Badge.tsx
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   └── sections/
│       ├── HeroSection.tsx
│       └── FeaturesSection.tsx
└── lib/
    └── styles.ts (утилиты)

globals.css (единственный CSS файл)

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* === Theme переменные === */
@theme inline {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-border-primary: #e2e8f0;
}

/* === Базовые стили === */
@layer base {
  * {
    @apply transition-colors duration-200;
  }
  
  h1 {
    @apply text-3xl font-bold;
  }
}

/* === Компонентные классы === */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
  
  .card {
    @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200;
  }
}

Компоненты с Tailwind

// === Button.tsx ===
import { cn } from '@/lib/utils';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({
  variant = 'primary',
  size = 'md',
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'font-medium transition-colors',
        // Размер
        size === 'sm' && 'px-3 py-1 text-sm',
        size === 'md' && 'px-4 py-2 text-base',
        size === 'lg' && 'px-6 py-3 text-lg',
        // Вариант
        variant === 'primary' && 'bg-blue-500 text-white hover:bg-blue-600',
        variant === 'secondary' && 'bg-gray-200 text-gray-900 hover:bg-gray-300',
        variant === 'outline' && 'border-2 border-gray-300 hover:border-gray-400',
      )}
      {...props}
    >
      {children}
    </button>
  );
}

// === Использование ===
<Button variant="primary" size="lg">Save</Button>

Избегать хардкода цветов

// НЕПРАВИЛЬНО:
<div className="bg-gray-300 text-gray-700">Bad</div>

// ПРАВИЛЬНО: используй семантические классы
<div className="bg-surface-secondary text-content-secondary">Good</div>

// Или переменные из globals.css:
<div className="" style={{ background: 'var(--color-primary)' }}>Better</div>

Dark mode (если нужен)

/* tailwind.config.ts */
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        'surface-primary': 'light {
          light: #ffffff,
          dark: #1a1a1a,
        }',
      },
    },
  },
};

// Использование
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content
</div>