Tailwind CSS простыми словами: зачем ИИ пишет эти классы

Открываешь код, который Claude Code только что написал для твоей «Змейки», и вместо привычного файла со стилями видишь строку вроде class="flex items-center bg-blue-500 text-2xl font-bold rounded-lg px-4 py-2". Ни одного знакомого слова из уроков «CSS для новичков», зато десяток непонятных обрывков через пробел. Это не мусор и не ошибка, которую ИИ забыл убрать за собой. Это Tailwind CSS — набор готовых классов оформления, который сегодня по умолчанию используют почти все ИИ-инструменты для фронтенда, от Claude Code до v0 от Vercel. Разберём, что это такое, откуда берутся эти классы и как их читать, даже если ты никогда не писал ни строчки CSS.

Что такое Tailwind CSS простыми словами

CSS — это язык, который описывает, как выглядит страница: какого цвета кнопка, какой отступ у блока, каким шрифтом написан заголовок. Классический способ работы с ним такой: заводишь отдельный файл style.css, придумываешь в нём имя для стиля («кнопка», «карточка»), а потом расписываешь под этим именем набор правил — цвет фона, размер текста, скругление углов. В HTML остаётся только ссылка на это имя: class="knopka".

Tailwind устроен наоборот. В нём нет отдельного файла, где ты сам придумываешь имена и правила. Вместо этого есть библиотека уже готовых классов, и у каждого — конкретный, заранее заданный эффект. Один класс почти всегда отвечает за одно свойство оформления: bg-blue-500 красит фон в синий, text-2xl увеличивает шрифт, rounded-lg скругляет углы, px-4 задаёт отступ по бокам. Собирая нужный внешний вид, ты просто перечисляешь такие классы прямо в разметке, один за другим, — как складываешь конструктор из готовых деталей, а не вытачиваешь каждую деталь заново.

Такой подход в документации называют utility-first: «утилита» здесь — это маленький, узкоспециализированный класс на одну задачу, а не крупный компонент вроде «кнопка сайта». Поэтому в коде, написанном с Tailwind, отдельного style.css почти нет, а вся информация о том, как выглядит элемент, читается прямо в его атрибуте class.

Разница видна лучше всего на одном и том же элементе. Кнопка «Начать игру» классическим способом выглядит так — сначала имя в HTML, потом правила под этим именем в отдельном файле:

<button class="start-button">Начать игру</button>

.start-button {
  background-color: #3b82f6;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
}

Та же кнопка на Tailwind обходится без второго файла — все четыре правила видны сразу в разметке:

<button class="bg-blue-500 px-4 py-2 rounded-lg font-bold">Начать игру</button>

Результат в браузере одинаковый, но во втором случае не нужно ни придумывать имя start-button, ни держать в голове, что оно означает, ни помнить, в каком файле искать его стили, когда захочется что-то поправить.

Полный список таких классов и их точных значений — на официальном сайте tailwindcss.com. Это первый адрес, куда стоит заглянуть, когда в коде встретился незнакомый класс: там есть поиск по названию, и по нему за секунду находится, что именно делает конкретное сокращение.

Почему ИИ выбирает Tailwind, а не обычный CSS или Bootstrap

Когда ИИ-модель пишет интерфейс, у неё есть выбор: завести отдельный CSS-файл с именами классов, взять готовый набор компонентов вроде Bootstrap или расставить utility-классы Tailwind прямо в разметке. На практике Claude Code, v0 от Vercel и мастер создания нового проекта в Next.js по умолчанию выбирают именно Tailwind, и на это есть несколько практических причин.

Первая — не нужно придумывать имена. Написать bg-blue-500 проще и надёжнее, чем изобрести название вроде «синяя-кнопка-в-шапке», а потом не забыть использовать точно такое же имя в другом файле. Когда стиль и разметка разнесены по двум файлам, легко получить рассинхрон: класс в HTML есть, а правило под этим именем в CSS уже переименовали или удалили. С utility-классами такой ошибки просто не может возникнуть — сам класс и есть правило.

Вторая причина — вся стилизация элемента видна в одной строке. Если ИИ генерирует один компонент за раз, ему не нужно параллельно держать в памяти и открытый HTML-файл, и открытый CSS-файл, сверяя, что где изменилось. Разработчику, который потом читает этот код, тоже проще: смотришь на кнопку и сразу видишь весь список её свойств, не переключаясь между вкладками редактора.

Насколько легко два файла расходятся на практике, видно на простом сценарии. Допустим, в проекте с обычным CSS попросили ИИ переименовать класс .start-button в .play-button — например, потому что кнопок стало несколько и старое имя перестало быть понятным. Если правка внесена только в CSS-файл, а в HTML осталось старое имя, кнопка молча теряет все стили: ошибки не будет, браузер просто не найдёт совпадения и покажет неоформленный элемент. С utility-классами Tailwind такой класс ошибок физически не существует, потому что переименовывать нечего — сам класс bg-blue-500 и есть его смысл.

Третья причина менее очевидна, но важна: современные модели обучены на огромном количестве публичного кода, а Tailwind за последние несколько лет стал одним из самых распространённых способов стилизации в проектах на React и Next.js. Модель видела тысячи примеров правильного использования этих классов, поэтому реже путает свойства и почти не выдумывает несуществующих названий.

Четвёртая причина — так устроены сами инструменты. Мастер создания нового проекта в Next.js сразу предлагает подключить Tailwind galочкой при старте. Сервис v0 от Vercel, который генерирует интерфейсы по текстовому описанию, вообще не предлагает альтернативы: весь код, который он выдаёт, размечен именно utility-классами Tailwind. Если тебе интересно, как это выглядит на практике, — в статье о генерации интерфейсов через v0 показан пример такого кода.

Отдельно стоит сравнить с Bootstrap — ещё одной популярной библиотекой стилей, о которой ты мог слышать. Bootstrap даёт готовые компоненты целиком: класс btn — это уже полностью оформленная кнопка, card — уже готовая карточка со своим внутренним отступом и тенью. Это быстро, но негибко: чтобы сделать кнопку чуть другого оттенка или формы, приходится переопределять чужие правила, а это требует понимания, откуда они взялись и какое из них сильнее.

Здесь всплывает старая проблема CSS, о которую годами спотыкались даже опытные разработчики, — специфичность. Когда два правила задают одному элементу разные значения одного свойства, браузер выбирает не то, что написано позже, а то, что «весомее» по особым правилам подсчёта. Готовое правило из библиотеки Bootstrap часто оказывается весомее собственного правила проекта, и тогда правка, которая выглядит правильной, просто не применяется — приходится добавлять служебные пометки вроде !important или наращивать вложенность селектора, лишь бы перевесить чужой стиль. У Tailwind такой проблемы почти нет: заранее собранных компонентов с внутренними правилами нет вообще, есть только строительные блоки, из которых собирается любой внешний вид без борьбы с чужими стилями.

Как читать самые частые классы — шпаргалка для новичка

Большинство классов Tailwind построены по понятной логике сокращений: bg — background (фон), text — текст, p — padding (внутренний отступ), m — margin (внешний отступ), rounded — скруглённые углы. Как только привыкаешь к десятку таких сокращений, начинаешь понимать даже незнакомые классы по аналогии.

С числами в названиях цветов и отступов всё тоже подчинено системе, а не взято с потолка. Цвета в Tailwind идут по шкале насыщенности от 50 (почти белый) до 900–950 (почти чёрный), поэтому bg-blue-500 — это средний, «стандартный» синий, а bg-blue-100 — бледно-голубой фон. Отступы вроде px-4 растут с постоянным шагом: чем больше число, тем больше отступ. Знать точные значения в пикселях необязательно — достаточно понимать, что цифра больше значит эффект сильнее, а для точного значения всегда можно свериться с документацией на tailwindcss.com.

Есть и классы-«модификаторы», которые добавляются перед основным классом через двоеточие: hover:, md:, dark: из таблицы выше — это именно они. Читать такую запись стоит справа налево: сначала смотришь на основной класс, потом на условие перед двоеточием. md:flex значит «стань flex-блоком, но только на экранах от среднего размера и шире» — то есть на телефоне блок может выглядеть иначе, чем на компьютере, и это задаётся прямо в одной строке классов, без отдельных медиа-запросов в CSS-файле.

Модификаторы можно ставить и подряд, друг за другом: md:hover:bg-blue-600 читается как «на экранах от среднего размера и шире, при наведении мышью — сделай фон более тёмным». На телефоне, где наводить мышью нечем, это правило просто не сработает, а на компьютере — сработает только после переключения ширины экрана за пороговое значение. Для новичка такую цепочку не нужно запоминать наизусть: достаточно уметь разбирать её по частям слева направо, отбрасывая по одному условию за раз.

Отдельно про классы шрифта

Шрифт — тема, где у новичка обычно возникает больше всего вопросов, потому что за него отвечает сразу несколько разных классов, а не один. text-2xl управляет только размером — сама цифра растёт от text-xs (мелкий подписи) до text-6xl (крупный заголовок на весь экран), и за каждым таким классом стоит конкретная, заранее заданная пара «размер шрифта плюс межстрочный интервал», подобранная так, чтобы текст любого размера выглядел аккуратно без ручной настройки. font-bold отвечает за насыщенность, а не за размер — есть и более лёгкие варианты вроде font-normal или font-medium, для игры это обычно не понадобится, но в интерфейсах курса встречается.

За само начертание шрифта — то есть за то, какой именно гарнитурой набран текст, — отвечает отдельный класс font-sans, font-serif или font-mono. По умолчанию Tailwind подключает системный шрифт без засечек, знакомый по большинству сайтов. Если хочется подключить собственный, нестандартный шрифт — это делается не через utility-класс, а через настройку темы проекта: там указывается имя загруженного шрифта, и дальше он становится доступен как обычный класс вроде font-sans, только уже со своим значением внутри. Для «Змейки» и типовых страниц курса вполне хватает системного шрифта, и трогать эту настройку не требуется.

Путь класса от кода до браузера

Здесь важно понять одну вещь, которая на первый взгляд не очевидна: Tailwind — это не тысячи строк CSS, которые грузятся в браузер при каждом заходе на сайт. Библиотека классов огромна, но в готовый проект попадают только те классы, которые реально встретились в коде.

flowchart TB
    A["Пишешь классы в JSX или HTML"] --> B["Сборщик Tailwind сканирует файлы проекта"]
    B --> C["Отбирает только реально использованные классы"]
    C --> D["Генерирует CSS-файл с этими правилами"]
    D --> E["Браузер загружает готовый CSS"]
    E --> F["Страница показывает нужные стили"]

Работает это так. Пока Claude Code пишет код, он расставляет классы вроде bg-blue-500 прямо в разметке — в файлах игры это могут быть JSX-компоненты React или обычные HTML-теги. Отдельный инструмент сборки (он запускается через Node.js, о котором подробно рассказано в статье «Что такое Node.js») проходит по всем файлам проекта — обычно с расширениями .html, .jsx, .tsx — и составляет список всех классов, которые в них встретились как текст. Дальше он берёт только правила для этих классов и складывает их в один итоговый CSS-файл — а не тащит туда всю библиотеку целиком.

Для класса bg-blue-500 итоговое правило в этом файле выглядит примерно так:

.bg-blue-500 {
  background-color: rgb(59 130 246);
}

Если такой класс в проекте нигде не встретился, соответствующего правила в итоговом файле просто не будет — сканер его не нашёл, значит, и генерировать нечего. Именно поэтому даже большой проект на Tailwind в итоге отдаёт браузеру компактный файл стилей: неиспользованные классы туда не попадают, сколько бы их ни было в исходной библиотеке.

Редактор тоже помогает читать классы

Если открыть файл со Змейкой в редакторе кода, которым пользуется Claude Code, длинная строка классов выглядит не так пугающе, как в простом текстовом просмотрщике. У популярных редакторов есть расширения для Tailwind, которые подсвечивают классы цветом, показывают маленький цветной квадратик рядом с bg-blue-500, чтобы сразу было видно, какой это оттенок, и подсказывают варианты при наборе — начинаешь печатать bg-bl, а редактор сам предлагает список подходящих классов с превью цвета. Пользоваться этим отдельно не обязательно, но полезно знать, что такая подсказка существует, если решишь заглянуть в код глубже, чем требует курс.

Есть и облегчённый вариант — Tailwind CDN. Иногда в уроках и на демо-страницах можно встретить одну строку прямо в html-файле: <script src="https://cdn.tailwindcss.com"></script>. В этом случае никакой сборки не происходит — скрипт разбирает классы на странице прямо в браузере пользователя, на лету. Это удобно для быстрого эксперимента в одном файле без настройки проекта, но так не публикуют боевые сайты: без предварительной сборки итоговый файл получается тяжелее, а часть преимуществ (например, компактный итоговый CSS) пропадает. Для учебной «Змейки» и других проектов курса используется обычный способ со сборкой — тот, что показан на схеме выше.

Tailwind, обычный CSS и Bootstrap — в чём разница

Три подхода решают одну задачу — оформление страницы — но по-разному распределяют работу между тобой, ИИ и готовой библиотекой.

Из таблицы видно, что у каждого подхода своя цена. Обычный CSS даёт максимальный контроль, но требует больше ручной работы и внимательности. Bootstrap экономит время на типовых элементах, но с трудом подстраивается под нестандартный дизайн. Tailwind — компромисс: скорость почти как у готовой библиотеки, а гибкость почти как у чистого CSS.

Разница в разметке видна на примере одной и той же карточки — скажем, карточки рекорда в «Змейке». В Bootstrap она собирается из готовых, заранее оформленных классов компонента:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Твой рекорд</h5>
  </div>
</div>

Внешний вид здесь целиком определяет библиотека — сам Bootstrap решает, какой у карточки будет отступ, тень и скругление, а чтобы это изменить, нужно переопределять его правила. На Tailwind та же карточка выглядит иначе: вид собирается из отдельных классов прямо на месте, и любое значение меняется без оглядки на чужие правила:

<div class="rounded-lg shadow-md p-4">
  <h5 class="text-xl font-bold">Твой рекорд</h5>
</div>

Это не значит, что Bootstrap или обычный CSS — устаревший выбор. Готовый набор компонентов Bootstrap до сих пор удобен, когда нужен стандартный административный интерфейс без какой-либо уникальности во внешнем виде и без времени на дизайн. Обычный CSS остаётся незаменим там, где нужен один сложный, уникальный визуальный эффект — редкая анимация или необычная форма блока, — который проще написать точечно, чем собирать из мелких utility-классов. Для учебного проекта курса, где дизайн стандартный, а скорость важнее уникальности, выбор в пользу Tailwind оправдан почти всегда.

Минусы Tailwind и когда он оправдан

У подхода Tailwind есть и обратная сторона, и честно о ней сказать стоит сразу.

Главная жалоба новичков — разметка выглядит перегруженной. Строка из десяти-пятнадцати классов подряд читается тяжелее, чем короткое class="knopka" с понятным именем, особенно пока глаз не привык к сокращениям. На первых порах кажется, что смотришь на шифр, а не на код.

Вторая сложность — распознавание паттернов. Чтобы бегло читать Tailwind, нужно запомнить смысл десятка префиксов (bg, text, p, m, flex, rounded) и логику шкалы чисел рядом с ними. Это не разовое усилие, а привычка, которая нарабатывается за несколько недель работы с кодом — примерно как учишься читать показания приборов в незнакомой машине.

Третье ограничение — для по-настоящему уникальной, нестандартной графики (сложная анимация, редкий визуальный эффект) готовых utility-классов может не хватить, и тогда проще написать обычный CSS-код точечно под конкретный случай, оставив Tailwind для всего остального интерфейса.

Четвёртая сложность возникает, когда одна и та же длинная строка классов повторяется в проекте много раз — например, если каждая кнопка на пяти экранах игры собрана из одного и того же набора из пятнадцати классов. Копировать эту строку вручную по всему проекту неудобно, и разработчики решают это не откатом к обычному CSS, а вынесением повторяющегося набора в один переиспользуемый компонент — например, компонент Button в React, который один раз содержит нужные классы и дальше используется по имени в остальных местах. Так разметка не разбухает, а Claude Code может сам предложить такой вынос, если заметит повторение.

При этом для большинства учебных и коммерческих проектов эти минусы не перевешивают удобство. Стандартные элементы интерфейса — кнопки, карточки, формы, шапка и подвал сайта — как раз тот случай, где Tailwind ускоряет работу, а не мешает. Игра «Змейка» из курса и типовой интернет-магазин, собранный с ИИ, устроены именно так: почти вся вёрстка состоит из повторяющихся стандартных блоков, для которых utility-классы подходят лучше всего.

Как отредактировать Tailwind-класс самому

Тебе не обязательно учить CSS, чтобы поправить сгенерированный код своими руками. Порядок действий обычно такой.

Сначала найди в файле нужный элемент — например, кнопку «Начать игру» в разметке «Змейки». Дальше определи, какое именно свойство хочешь изменить: цвет, размер шрифта, отступ, скругление. По этому свойству легко понять, какой из классов в строке за него отвечает — цвет фона почти всегда начинается с bg-, размер текста — с text-, отступы — с p или m.

Дальше есть два пути проверить, что означает конкретный класс и на что его заменить. Первый — открыть tailwindcss.com и поискать по названию свойства: там показан весь список доступных значений с примерами. Второй, более быстрый в разговоре с ИИ — просто спросить у Claude Code прямым текстом: «объясни, что делает класс bg-blue-500» или сразу поставить задачу «замени bg-blue-500 на зелёный оттенок такой же насыщенности». ИИ прекрасно понимает такие формулировки, потому что сам оперирует этими же классами при написании кода.

После правки сохраняешь файл и смотришь результат в браузере. Если получилось не то, что хотел, — не нужно разбираться, что пошло не так: попроси Claude Code вернуть прежний вариант или попробовать другое значение. Ошибиться с классом Tailwind почти невозможно: если название неверное, стиль просто не применится, а не сломает всю страницу, как иногда бывает с опечаткой в ручном CSS.

На практике диалог с Claude Code вокруг одного класса выглядит буднично. Допустим, кнопка «Начать игру» в «Змейке» кажется слишком бледной, и хочется сделать её заметнее. Формулировка задачи может быть такой:

Claude Code сам найдёт нужную строку и заменит один класс на bg-green-600 или похожий, не трогая остальные — отступы, скругление и размер шрифта останутся прежними, потому что они заданы отдельными, независимыми классами. Это ключевое отличие utility-классов от компонентов Bootstrap: там пришлось бы разбираться, как переопределить встроенный стиль кнопки, не сломав остальные её свойства.

Частые вопросы

Нужно ли учить CSS, чтобы работать с Tailwind вместе с ИИ?

Нет, для базовой работы это необязательно. Достаточно понимать логику сокращений из таблицы выше и уметь спросить у Claude Code, что делает конкретный класс. Знание CSS пригодится позже, если захочешь глубже кастомизировать проект, но для старта курса это не требуется.

Можно ли попросить Claude Code переписать Tailwind на обычный CSS?

Технически можно поставить такую задачу, и ИИ с ней справится. Но это лишит проект части удобств, о которых говорилось выше: придётся вручную синхронизировать имена классов между файлами, а сам ИИ хуже приспособлен именно к такому способу стилизации. Для учебных целей менять подход не имеет смысла.

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

Потому что при подходе Tailwind сами стили в основном описываются прямо в разметке через utility-классы. Небольшой конфигурационный файл или файл с базовыми настройками темы в проекте всё же может быть, но он не похож на классический style.css с сотнями правил.

Что делать, если нужного цвета или размера нет среди готовых классов?

У Tailwind широкая, но не бесконечная шкала значений. Если готового варианта действительно нет, попроси Claude Code добавить нужное значение через настройки темы проекта или использовать произвольное значение прямо в классе — Tailwind это тоже умеет. В подавляющем большинстве случаев готовой шкалы хватает с запасом.

Не тормозит ли сайт из-за такого количества классов в коде?

Нет. Как показано на схеме выше, в готовый CSS-файл, который загружает браузер, попадают только реально использованные классы, а не вся библиотека. Итоговый файл стилей у Tailwind-проекта обычно компактнее, чем у сайта с самописным CSS, который годами обрастал неиспользуемыми правилами. Количество классов в самой разметке на скорость загрузки страницы почти не влияет — браузер читает текстовые атрибуты элементов практически мгновенно, тяжёлой частью работы остаётся сам CSS-файл, а он, как раз наоборот, у Tailwind меньше.

Совместим ли Tailwind с публикацией на GitHub Pages?

Да. Сборка Tailwind происходит на этапе подготовки проекта и превращается в обычный статический CSS-файл — точно такой же, как если бы ты написал его вручную. GitHub Pages отдаёт готовые файлы, поэтому ему всё равно, каким способом они были созданы.

Что в итоге

Классы вроде flex items-center bg-blue-500 rounded-lg px-4 py-2 — не хаос и не признак того, что ИИ написал код небрежно. Это Tailwind: способ описывать оформление прямо в разметке, класс на класс, без отдельного файла стилей и без риска, что имя в одном месте разъедется с правилом в другом. Именно поэтому его выбирают Claude Code, v0 и Next.js по умолчанию — он экономит и время ИИ, и твоё, пока ты учишься читать и точечно поправлять сгенерированный код.

Дальше в курсе такие классы будут встречаться в каждом модуле — от первой версии «Змейки» до магазина скинов и адаптивной вёрстки под телефон. Чем больше таких строк пройдёт перед глазами, тем быстрее сокращения вроде bg-, text-, p- перестанут выглядеть шифром и начнут читаться так же спокойно, как обычные слова.

Возвращайся к таблице классов из этой статьи как к шпаргалке, когда увидишь незнакомое сокращение, и не стесняйся напрямую спрашивать Claude Code, что делает конкретный класс в твоём коде — это ровно тот вопрос, на который ИИ отвечает быстрее и точнее, чем любой поиск в интернете.