Почему нейросети поголовно верстают на Tailwind и как заставить их отдавать чистый HTML

Заметка для тех, кто просто хотел получить лендинг, а получил набор файлов, требующих компиляции

Ситуация из практики

Вы просите нейросеть: "Создай красивый адаптивный лендинг для частного производителя тортов". И получаете ответ:



Знакомо? Очевидно, что использование 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 от нейросети — это:

1. Необходимость настраивать сборку. Tailwind — это не просто CSS-файл, это набор инструкций, который требует компиляции через PostCSS, webpack или хотя бы CLI-утилиту.
   
2. Разбухание HTML. Страница превращается в простыню из 20-30 классов на одном div. Читать и поддерживать такой код вручную — то ещё удовольствие.
   
3. Привязка к экосистеме. Если проект предполагает передачу заказчику "как есть", тащить за собой конфиги 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: Запрос в несколько шагов

Сначала просим нарисовать структуру:


Потом отдельно просим стили:


Такой подход снижает вероятность того, что модель "сорвётся" в генерацию 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. Нужно только правильно попросить.


А вы сталкивались с тем, что нейросети навязывают инструменты, которые вам неудобны? Делитесь опытом в комментариях!