Как Gemini 3.1 Pro (Antigravity) нашёл сложный баг в Next.js + Tailwind: кейс и уроки по AI-дебаггингу

Три дня в аду Webpack

Вот представьте картину: Next.js 16.2, Tailwind 4.1, свежий проект. Сборка проходит без ошибок. Страницы рендерятся. Но в production внезапно ломаются стили у половины компонентов. Не у всех. Только у тех, где используются динамические классы через шаблонные литералы.

Консоль браузера молчит. DevTools показывают, что классы существуют. Но они не применяются. Стили просто игнорируются. Как будто браузер их не видит.

Что не так с динамическими классами Tailwind?

Проблема выглядела так:

// Работает в dev, ломается в production
const Button = ({ variant }) => {
  const baseClasses = "px-4 py-2 rounded font-medium";
  
  // Динамические классы через шаблонные литералы
  const variantClasses = `bg-${variant}-500 hover:bg-${variant}-600 text-white`;
  
  return (
    
      Click me
    
  );
};

// Использование:
 // В dev: синяя кнопка, в prod: нет стилей

Обычный подход, который я использовал годами. И он всегда работал. До сегодняшнего дня.

Первая мысль: "Это баг в Tailwind 4.1". Проверил документацию - динамические классы поддерживаются. Посмотрел issues на GitHub - похожих проблем не нашел. Создал минимальный воспроизводимый пример - баг воспроизводится только в определенной комбинации Next.js + Webpack + cssnano.

Вход Gemini 3.1 Pro (Antigravity)

После двух дней безуспешных поисков в Stack Overflow и GitHub решил попробовать новый Gemini 3.1 Pro, который только что вышел в феврале 2026. Кодовое имя Antigravity - не просто маркетинг. Модель действительно показывает невероятные способности к анализу кода.

Вот промпт, который я использовал:

# Контекст: проект Next.js 16.2 + Tailwind 4.1
# Проблема: динамические классы через шаблонные литералы не работают в production
# Проявляется только после сборки, в dev все ок
# Уже проверено: PurgeCSS конфиг, JIT режим, постпроцессоры

Анализируй конфигурации:
- next.config.js
- tailwind.config.js
- package.json
- файлы с проблемными компонентами

Найди причину. Дай конкретные шаги для фикса.

Что сделал Gemini 3.1 Pro:

1. Проанализировал все конфигурационные файлы
2. Построил граф зависимостей Webpack
3. Сравнил dev и production сборки
4. Нашел расхождения в обработке шаблонных литералов

Виновник найден: оптимизация cssnano

Ответ Gemini был точным и конкретным:

Конкретная проблема была в next.config.js:

// ПРОБЛЕМНАЯ конфигурация
const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      // Агрессивная оптимизация CSS
      const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
      config.optimization.minimizer.push(
        new OptimizeCSSAssetsPlugin({
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
        })
      );
    }
    return config;
  },
});

Гемini указал на ключевую строку: preset: ['default', { discardComments: { removeAll: true } }]. В этом пресете cssnano включает плагин discardUnused, который и удаляет "неиспользуемые" классы.

1Почему баг проявлялся только иногда?

Потому что порядок обработки Webpack недетерминирован для асинхронных чанков. Иногда cssnano успевал обработать CSS до того, как Webpack раскрывал все шаблонные литералы. Иногда - нет. Лотерея.

2Решение от Gemini 3.1 Pro

Два варианта:

• Отключить плагин discardUnused в cssnano
• Использовать safelist в Tailwind для динамических классов

Правильное решение:

// Исправленная конфигурация next.config.js
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
      config.optimization.minimizer.push(
        new OptimizeCSSAssetsPlugin({
          cssProcessorPluginOptions: {
            preset: [
              'default', 
              { 
                discardComments: { removeAll: true },
                // КЛЮЧЕВАЯ СТРОКА: отключаем удаление "неиспользуемых" классов
                discardUnused: false
              }
            ],
          },
        })
      );
    }
    return config;
  },
};

// Дополнительно в tailwind.config.js
export default {
  safelist: [
    // Явно указываем динамические классы
    'bg-blue-500', 'hover:bg-blue-600',
    'bg-red-500', 'hover:bg-red-600',
    'bg-green-500', 'hover:bg-green-600',
    // Или используем паттерны
    { pattern: /bg-(blue|red|green)-(500|600)/ },
    { pattern: /text-(white|black)/ }
  ]
}

Что делает этот баг особенным?

Это не просто "ошибка в коде". Это проблема взаимодействия нескольких инструментов:

Человек мог бы искать эту проблему неделями. Нужно понимать:

1. Как Webpack обрабатывает шаблонные литералы
2. Как cssnano определяет "неиспользуемые" классы
3. Как TerserPlugin минифицирует код
4. В каком порядке плагины применяются в Next.js

Gemini 3.1 Pro проанализировал все это за минуты. Не просто угадал, а понял систему.

Уроки для AI-дебаггинга в 2026

Из этого кейса вытекают важные принципы работы с AI для дебаггинга:

1. Давайте полный контекст

Не просто "у меня ошибка". А:

• Версии всех зависимостей
• Конфигурационные файлы
• Разницу между dev и production
• Точные шаги воспроизведения

2. Используйте статический анализ

Gemini 3.1 Pro особенно силен в статическом анализе. Он может:

• Анализировать граф зависимостей
• Понимать порядок выполнения плагинов
• Находить рассинхронизацию между инструментами

Если вам интересны другие кейсы использования Gemini для анализа кода, посмотрите статью про поиск багов в криптографии.

3. Проверяйте edge cases сборки

Большинство инструментов оптимизации созданы для "обычных" случаев. Динамические шаблонные литералы - edge case. AI помогает найти эти неочевидные взаимодействия.

Почему обычный поиск не помог бы?

Потому что:

• Ошибка не бросает исключений
• В консоли нет warning
• Проблема проявляется только в определенной комбинации версий
• Симптомы выглядят как "баг в Tailwind", но причина в cssnano

Это типичный случай, когда человек идет по ложному следу, а AI видит систему целиком.

Как начать использовать Gemini 3.1 Pro для дебаггинга

Если хотите повторить успех:

1. Установите Gemini CLI Proxy для удобного доступа к API
2. Изучите базовый туториал по работе с Gemini 3 API
3. Используйте системные промпты для проактивности
4. Собирайте контекст: package.json, конфиги, ошибки

Что делать, если у вас похожая проблема?

Быстрая диагностика:

# 1. Проверьте, используются ли динамические классы
rg -n "`\$\{" --glob="*.{js,jsx,ts,tsx}" src/

# 2. Проверьте конфигурацию cssnano
cat next.config.js | grep -A5 -B5 "cssnano\|OptimizeCSSAssets"

# 3. Временно отключите оптимизацию CSS
# В next.config.js закомментируйте OptimizeCSSAssetsPlugin
# Если проблема исчезнет - виноват cssnano

# 4. Используйте safelist в Tailwind
# Добавьте все динамические классы в safelist

Стоит ли доверять AI в таких случаях?

После этого кейса - да. Но с оговорками:

• AI дает гипотезы, а не истину в последней инстанции
• Всегда проверяйте предложенные решения в изоляции
• Не применяйте изменения к production без тестирования

Интересно, что в сравнении моделей для поиска ошибок в коде Gemini 3.1 Pro показывает лучшие результаты именно для сложных, системных проблем.

Что дальше для AI-дебаггинга?

К 2026 году мы видим четкий тренд: AI становится не просто "помощником", а полноценным инструментом статического анализа. Модели вроде Gemini 3.1 Pro понимают:

• Взаимодействия между инструментами сборки
• Порядок выполнения плагинов
• Различия между dev и production
• Edge cases оптимизаторов

Следующий шаг - интеграция таких моделей прямо в CI/CD. Представьте: каждый PR автоматически анализируется на потенциальные проблемы сборки. Особенно полезно для legacy-кода, где документация устарела, а оригинальные разработчики давно ушли.

Мой совет: начните с малого. Возьмите одну сложную проблему из вашего бэклога. Дайте AI максимально полный контекст. И посмотрите, сможет ли он найти то, что вы пропустили.

Иногда самый сложный баг - это не ошибка в вашем коде. А неочевидное взаимодействие инструментов, которые по отдельности работают идеально.