Почему нейросети поголовно верстают на Tailwind и как заставить их отдавать чистый HTML
Заметка для тех, кто просто хотел получить лендинг, а получил набор файлов, требующих компиляции
Вы просите нейросеть: "Создай красивый адаптивный лендинг для частного производителя тортов". И получаете ответ:
Знакомо? Очевидно, что использование Tailwind в данном случае продиктовано удобством непосредственно для нейросети, а не для живого человека, который хочет получить на выходе готовый HTML, но никак не набор файлов, требующих компиляции.
Почему так происходит? Давайте разбираться.
Тут работает элементарная статистика. Вспомните 2020 год, когда команда Tailwind CSS выпустила свою библиотеку компонентов Tailwind UI. Все примеры в документации, все туториалы на YouTube, все статьи на Хабре — везде кнопки были окрашены в indigo-500. Этот цвет стал визуальной "подписью" Tailwind .
Что произошло дальше? Нейросети обучались на этих материалах. Миллионы примеров кода с классами bg-indigo-600, text-indigo-100, hover:bg-indigo-700 сформировали у модели устойчивую ассоциацию: "современный красивый сайт = индиго + Tailwind". Это классический пример того, как "короткий путь" разработчиков стал стандартом де-факто в глазах ИИ .
Для нейросети каждый символ — это "токен". Класс bg-indigo-600 — это один токен. А эквивалентный набор CSS-правил background-color: #4f46e5; — это уже 5-6 токенов .
Модель обучалась на огромных корпусах текста, и у неё встроен механизм "экономии". Tailwind позволяет одной короткой строкой классов описать то, что в чистом CSS заняло бы 5-10 строк. Для нейросети это просто выгоднее: меньше токенов = меньше вероятность ошибки = быстрее генерация.
Как справедливо заметил один из разработчиков в обсуждении на Hacker News: "Tailwind provides a semantic layer that allows them to actually understand it" — Tailwind предоставляет семантический слой, который позволяет нейросетям действительно понимать, что они генерируют .
Современные AI-инструменты для фронтенда — v0.dev, Bolt.new, Replit — все они по умолчанию генерируют React + Tailwind. Это уже стало негласным стандартом . Исследование 2025 года показало, что все ведущие AI-генераторы фронтенда выбирают один и тот же стек: TypeScript, React, Tailwind — даже без явной просьбы .
Когда модель видит, что так делают все "продвинутые" инструменты, она закрепляет это поведение как единственно верное. Это эффект "стадного чувства" в машинном обучении.
Tailwind изначально спроектирован как mobile-first фреймворк. Классы вроде md:flex, lg:w-1/2 для нейросети — это простой и понятный способ объяснить, как элемент должен вести себя на разных экранах. Написать адаптивную вёрстку на чистом CSS с медиазапросами сложнее: нужно помнить брейкпоинты, не ошибиться в синтаксисе, следить за специфичностью. Tailwind снимает эту головную боль .
Для нас, людей, которые привыкли получать готовый результат, Tailwind от нейросети — это:
Один из разработчиков на LinkedIn заметил: "Tailwind is a utility for humans. It‘s an ergonomics layer for humans authoring UI code. But if the “author” is an AI… do we even need a CSS framework?" . Действительно, если код пишет не человек, а машина, нужен ли нам промежуточный слой в виде CSS-фреймворка?
Если вы, как и я, предпочитаете получать на выходе готовый код без необходимости в сборщиках и компиляторах, вот несколько рабочих стратегий.
Работает в 80% случаев. Нужно чётко и недвусмысленно сказать, что Tailwind не нужен.
❌ Плохо: "Сделай лендинг без Tailwind"
✅ Хорошо: "Создай одностраничный сайт. Используй чистый HTML и CSS. Запрещено использовать любые CSS-фреймворки (Tailwind, Bootstrap, Foundation). Только стандартный CSS в теге < style > или отдельном файле."
Можно добавить конкретики про классы:
"Все стили должны быть написаны руками с использованием семантических названий классов (header, hero-title, features-grid). Никаких utility-классов."
Сначала просим нарисовать структуру:
Потом отдельно просим стили:
Такой подход снижает вероятность того, что модель "сорвётся" в генерацию Tailwind-классов.
Некоторые модели лучше понимают, когда им дают выбор из конкретных альтернатив:
Можно явно указать, как должен выглядеть ответ:
Вот проверенный вариант, который даёт хорошие результаты:
Готовый пример чистого HTML доступен по ссылке https://online.tcse-cms.com/html/sweet/
Tailwind стал жертвой собственного успеха. Будучи удобным инструментом для людей, он попал во все обучающие выборки и теперь воспринимается нейросетями как "единственно правильный" способ писать стили. Плюс фактор экономии токенов и стандартизация в AI-инструментах .
Но это не значит, что мы обязаны принимать правила игры машин. Чёткие формулировки, явные запреты и пошаговые инструкции позволяют получать от нейросетей именно тот результат, который нужен — чистый, самодостаточный HTML/CSS, готовый к загрузке на любой хостинг без лишних телодвижений.
Как справедливо заметили в одном обсуждении: "They can take Tailwind markup and convert it to clean CSS in seconds" . Если нейросеть умеет конвертировать Tailwind в чистый CSS, значит, она может и сразу генерировать чистый CSS. Нужно только правильно попросить.
А вы сталкивались с тем, что нейросети навязывают инструменты, которые вам неудобны? Делитесь опытом в комментариях!
Ситуация из практики
Вы просите нейросеть: "Создай красивый адаптивный лендинг для частного производителя тортов". И получаете ответ:
"Я создам красивый адаптивный лендинг для частного производителя тортов. Однако, в этом проекте используется Tailwind CSS вместо Bootstrap 5. Tailwind CSS обеспечивает ту же адаптивность и даже более гибкие возможности для стилизации."
Знакомо? Очевидно, что использование Tailwind в данном случае продиктовано удобством непосредственно для нейросети, а не для живого человека, который хочет получить на выходе готовый HTML, но никак не набор файлов, требующих компиляции.
Почему так происходит? Давайте разбираться.
Почему нейросети выбирают Tailwind: объективные причины
1. Обучающая выборка: эффект "синего индиго"
Тут работает элементарная статистика. Вспомните 2020 год, когда команда Tailwind CSS выпустила свою библиотеку компонентов Tailwind UI. Все примеры в документации, все туториалы на YouTube, все статьи на Хабре — везде кнопки были окрашены в indigo-500. Этот цвет стал визуальной "подписью" Tailwind .
Что произошло дальше? Нейросети обучались на этих материалах. Миллионы примеров кода с классами bg-indigo-600, text-indigo-100, hover:bg-indigo-700 сформировали у модели устойчивую ассоциацию: "современный красивый сайт = индиго + Tailwind". Это классический пример того, как "короткий путь" разработчиков стал стандартом де-факто в глазах ИИ .
2. Токенизация: экономия на спичках
Для нейросети каждый символ — это "токен". Класс bg-indigo-600 — это один токен. А эквивалентный набор CSS-правил background-color: #4f46e5; — это уже 5-6 токенов .
Модель обучалась на огромных корпусах текста, и у неё встроен механизм "экономии". Tailwind позволяет одной короткой строкой классов описать то, что в чистом CSS заняло бы 5-10 строк. Для нейросети это просто выгоднее: меньше токенов = меньше вероятность ошибки = быстрее генерация.
Как справедливо заметил один из разработчиков в обсуждении на Hacker News: "Tailwind provides a semantic layer that allows them to actually understand it" — Tailwind предоставляет семантический слой, который позволяет нейросетям действительно понимать, что они генерируют .
3. Стандарт индустрии: все так делают
Современные AI-инструменты для фронтенда — v0.dev, Bolt.new, Replit — все они по умолчанию генерируют React + Tailwind. Это уже стало негласным стандартом . Исследование 2025 года показало, что все ведущие AI-генераторы фронтенда выбирают один и тот же стек: TypeScript, React, Tailwind — даже без явной просьбы .
Когда модель видит, что так делают все "продвинутые" инструменты, она закрепляет это поведение как единственно верное. Это эффект "стадного чувства" в машинном обучении.
4. Адаптивность "из коробки"
Tailwind изначально спроектирован как mobile-first фреймворк. Классы вроде md:flex, lg:w-1/2 для нейросети — это простой и понятный способ объяснить, как элемент должен вести себя на разных экранах. Написать адаптивную вёрстку на чистом CSS с медиазапросами сложнее: нужно помнить брейкпоинты, не ошибиться в синтаксисе, следить за специфичностью. Tailwind снимает эту головную боль .
В чём проблема для "классического" разработчика?
Для нас, людей, которые привыкли получать готовый результат, Tailwind от нейросети — это:
- Необходимость настраивать сборку. Tailwind — это не просто CSS-файл, это набор инструкций, который требует компиляции через PostCSS, webpack или хотя бы CLI-утилиту.
- Разбухание HTML. Страница превращается в простыню из 20-30 классов на одном div. Читать и поддерживать такой код вручную — то ещё удовольствие.
- Привязка к экосистеме. Если проект предполагает передачу заказчику "как есть", тащить за собой конфиги Tailwind и зависимости в package.json не всегда уместно.
Один из разработчиков на LinkedIn заметил: "Tailwind is a utility for humans. It‘s an ergonomics layer for humans authoring UI code. But if the “author” is an AI… do we even need a CSS framework?" . Действительно, если код пишет не человек, а машина, нужен ли нам промежуточный слой в виде CSS-фреймворка?
Как заставить нейросеть отдавать чистый HTML/CSS
Если вы, как и я, предпочитаете получать на выходе готовый код без необходимости в сборщиках и компиляторах, вот несколько рабочих стратегий.
Стратегия 1: Явный запрет в промпте
Работает в 80% случаев. Нужно чётко и недвусмысленно сказать, что Tailwind не нужен.
❌ Плохо: "Сделай лендинг без Tailwind"
✅ Хорошо: "Создай одностраничный сайт. Используй чистый HTML и CSS. Запрещено использовать любые CSS-фреймворки (Tailwind, Bootstrap, Foundation). Только стандартный CSS в теге < style > или отдельном файле."
Можно добавить конкретики про классы:
"Все стили должны быть написаны руками с использованием семантических названий классов (header, hero-title, features-grid). Никаких utility-классов."
Стратегия 2: Запрос в несколько шагов
Сначала просим нарисовать структуру:
Напиши HTML-каркас страницы с семантической разметкой, без стилей.
Используй теги header, main, section, article.
Используй теги header, main, section, article.
Потом отдельно просим стили:
Теперь напиши CSS для этой разметки.
Используй современный CSS (flexbox, grid, переменные).
Стили должны быть в отдельном блоке.
Используй современный CSS (flexbox, grid, переменные).
Стили должны быть в отдельном блоке.
Такой подход снижает вероятность того, что модель "сорвётся" в генерацию Tailwind-классов.
Стратегия 3: Указание конкретных технологий
Некоторые модели лучше понимают, когда им дают выбор из конкретных альтернатив:
Используй для стилизации:
1) обычные CSS-классы,
2) CSS-переменные для цветов,
3) медиазапросы для адаптива.
Запрещено использовать библиотеки.Стратегия 4: Формат ответа
Можно явно указать, как должен выглядеть ответ:
Верни мне один HTML-файл, который содержит в себе и разметку, и стили в теге <style>. Файл должен открываться в браузере сразу, без какой-либо сборки.Пример рабочего промпта
Вот проверенный вариант, который даёт хорошие результаты:
Создай одностраничный лендинг для частной пекарни (торты на заказ).
Требования:
- Чистый HTML и CSS, никаких фреймворков
- CSS должен быть написан руками, без использования Tailwind, Bootstrap и т.д.
- Адаптивная вёрстка (медиазапросы для мобильных)
- Современный дизайн (много воздуха, мягкие тени, скругления)
- Цветовая гамма: тёплая (бежевый, коричневый, кремовый)
- Секции: шапка, герой с фото торта, преимущества, портфолио (сетка из 3 фото), отзывы, форма заказа, подвал
- Результат: один HTML-файл со встроенными стилями в <style>
- Без внешних библиотек и скриптов"Готовый пример чистого HTML доступен по ссылке https://online.tcse-cms.com/html/sweet/
Вывод
Tailwind стал жертвой собственного успеха. Будучи удобным инструментом для людей, он попал во все обучающие выборки и теперь воспринимается нейросетями как "единственно правильный" способ писать стили. Плюс фактор экономии токенов и стандартизация в AI-инструментах .
Но это не значит, что мы обязаны принимать правила игры машин. Чёткие формулировки, явные запреты и пошаговые инструкции позволяют получать от нейросетей именно тот результат, который нужен — чистый, самодостаточный HTML/CSS, готовый к загрузке на любой хостинг без лишних телодвижений.
Как справедливо заметили в одном обсуждении: "They can take Tailwind markup and convert it to clean CSS in seconds" . Если нейросеть умеет конвертировать Tailwind в чистый CSS, значит, она может и сразу генерировать чистый CSS. Нужно только правильно попросить.
А вы сталкивались с тем, что нейросети навязывают инструменты, которые вам неудобны? Делитесь опытом в комментариях!