# 🎨 Руководство по исправлению проблем со стилями CMS в Docker

## 🔍 Проблема
Стили Tailwind CSS не загружаются в Docker контейнере, но работают в локальной разработке.

## ✅ Решение

### 1. Исправленные файлы:

#### `src/app/globals.css`
```css
@import "tailwindcss/preflight";
@import "tailwindcss";
```
**Вместо:** `@import "tailwindcss";` и `@import "tw-animate-css";`

#### `next.config.ts`
```typescript
const nextConfig = {
  output: 'standalone',
  
  // Исключаем favicon из обработки как страницу
  async rewrites() {
    return [];
  },
  
  // CSS настройки (optimizeCss отключен из-за проблем с critters)
  // experimental: {
  //   optimizeCss: true,
  // },
  
  // Настройки для изображений
  images: {
    unoptimized: true,
    domains: ['localhost'],
  },
  
  // Настройки webpack для CSS
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!dev && !isServer) {
      config.optimization.splitChunks.cacheGroups.styles = {
        name: 'styles',
        test: /\.(css|scss)$/,
        chunks: 'all',
        enforce: true,
      };
    }
    return config;
  },
};
```

### 2. Используйте оптимизированный Dockerfile:

#### `Dockerfile.optimized`
- Multi-stage build для лучшей оптимизации
- Правильная обработка CSS на этапе сборки
- Проверка создания CSS файлов

### 3. Команды для пересборки:

```bash
# Остановка и полная пересборка
cd protekauto-cms
./rebuild-cms.sh

# Или вручную:
docker-compose down protekauto-cms
docker rmi protekauto-cms_protekauto-cms
docker-compose up --build -d protekauto-cms
```

## 🔧 Диагностика

### Проверка локальной сборки:
```bash
npm run build
ls -la .next/static/css/
```

### Проверка в контейнере:
```bash
docker exec -it protekauto-cms ls -la .next/static/css/
```

## 🚨 Частые проблемы

### 1. **Tailwind CSS v4 синтаксис**
- ❌ `@tailwind base;` 
- ✅ `@import "tailwindcss/preflight";`

### 2. **Экспериментальные функции**
- ❌ `optimizeCss: true` (требует critters)
- ✅ Отключено для стабильности

### 3. **Standalone режим**
- ✅ Включен для Docker оптимизации
- Может вызывать проблемы при сборке

### 4. **CSS не загружается в браузере**
- Проверьте Network tab в DevTools
- Убедитесь, что CSS файлы доступны по пути `/_next/static/css/`

## 📋 Чек-лист исправления

- [ ] Обновлен `globals.css` с правильными импортами
- [ ] Обновлен `next.config.ts` с правильными настройками
- [ ] Отключен `optimizeCss` (если есть проблемы с critters)
- [ ] Используется `Dockerfile.optimized`
- [ ] Локальная сборка проходит успешно
- [ ] CSS файлы создаются в `.next/static/css/`
- [ ] Контейнер пересобран с новыми настройками

## 🎯 Результат

После применения исправлений:
1. ✅ Локальная сборка проходит без ошибок
2. ✅ CSS файлы создаются корректно
3. ✅ Стили загружаются в Docker контейнере
4. ✅ Админка отображается с правильными стилями

## 📞 Поддержка

Если проблема не решена:
1. Проверьте логи контейнера: `docker-compose logs protekauto-cms`
2. Убедитесь, что все зависимости установлены
3. Попробуйте полную очистку: `docker system prune -f`