Что такое Tailwind CSS? Простое руководство для создателей приложений

Tailwind CSS — это инструмент для оформления сайтов. Вместо отдельных правил стилей в своём файле вы даёте каждому элементу короткие готовые имена классов: bg-white — белый фон, p-4 — внутренний отступ, text-lg — крупный текст, rounded-xl — скруглённые углы. Tailwind создаёт нужный браузеру CSS. Он бесплатный, с открытым исходным кодом и один из самых распространённых способов оформления современных веб-приложений.

Почему Tailwind важен при создании сайтов с ИИ

Если вы создаёте веб-приложение с помощью ИИ-конструктора, есть хороший шанс, что оно оформлено на Tailwind. Например, Mythex начинает новые проекты на стеке Vite + React + TypeScript + Tailwind, если вы не попросили иначе (как выбирается стек).

Для вас это важно в трёх отношениях:

• Изменения дизайна дешёвые. Поскольку стили лежат рядом с каждой кнопкой, карточкой и заголовком, ИИ может выполнить просьбу «сделай карточки менее перегруженными», поправив несколько классов в одном месте.
• Это можно читать. Классы Tailwind близки к обычному английскому. text-center font-bold text-2xl нетрудно расшифровать, даже если вы никогда не писали код.
• Внешний вид остаётся единообразным. Tailwind задаёт фиксированную шкалу размеров, отступов и цветов. Благодаря ей в приложении не появится 14 слегка разных оттенков серого.

Бытовая аналогия

Подумайте о покраске дома.

Обычный CSS — это как смешивать собственную краску для каждой стены. Свобода полная, но через некоторое время гостиная становится «тёплым белым», прихожая — «чуть более тёплым белым», и никто уже не помнит почему.

Tailwind — это палитра из магазина красок с наклейками. Каждая стена получает наклейку: «белый, матовый, 2 слоя». Палитра предлагает ограниченный набор оттенков. Свободы становится немного меньше, зато все на объекте по наклейке сразу понимают, как должна выглядеть стена.

Как работает Tailwind

Веб-страница состоит из HTML (содержимое и структура) и CSS (внешний вид). Обычно правила CSS лежат в отдельном файле и выглядят так:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

С Tailwind это правило не пишут: утилитарные классы ставятся прямо на элемент:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Ваше бронирование подтверждено
</div>

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

Tailwind версии 4 — текущая основная версия — настраивается с минимальным количеством конфигурации: вы устанавливаете его, добавляете его плагин в инструмент сборки и пишете @import "tailwindcss"; в начале CSS-файла. Пользовательские настройки, такие как фирменные цвета и шрифты, задаются в CSS как дизайн-токены, а не в большом JavaScript-конфиге, как в старых версиях. Если вы встретите старое руководство с упоминанием tailwind.config.js, именно поэтому.

Пример: карточка тарифа

Допустим, вы попросили ИИ-конструктор страницу с тарифами и хотите, чтобы карточка «Pro» выделялась. Код карточки может выглядеть так (в React-компоненте атрибут class записывается как className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Начать пробный период
  </button>
</div>

Читаем слева направо:

Если попросить «сделай карточку Pro заметной: синяя рамка и лёгкая тень», ИИ может заменить border-gray-200 на border-2 border-blue-600 и добавить shadow-lg. Вот и вся правка.

Адаптивность и тёмная тема

У Tailwind есть короткие префиксы для размеров экрана и состояний:

• md:grid-cols-3 — три колонки на средних и больших экранах; на телефоне действует стандартная одна колонка. Tailwind работает по принципу mobile-first: классы без префикса действуют везде, а префиксы добавляют изменения для больших экранов.
• hover:bg-gray-700 — более тёмная кнопка при наведении мыши.
• dark:bg-gray-900 — другой фон, когда включена тёмная тема.

Поэтому просьба сделать адаптивную под телефон вёрстку или тёмную тему в проекте на Tailwind обычно решается быстро.

Основные термины

Частые заблуждения

• «Tailwind — это дизайн». Нет. Tailwind даёт строительные блоки, а не внешний вид. Два сайта на Tailwind могут выглядеть совершенно по-разному. Типичный «вид приложения, сделанного ИИ» возникает из настроек по умолчанию, а не из самого Tailwind — дайте своему конструктору реальное направление. См. как спроектировать красивое приложение с ИИ.
• «Это то же самое, что встроенные стили». Не совсем. Классы берутся из общей шкалы, поддерживают наведение, тёмную тему и брейкпоинты и превращаются в обычный CSS на этапе сборки.
• «Tailwind делает страницы тяжёлыми». Сборка включает только классы, которые вы используете, поэтому CSS, отправляемый посетителям, обычно небольшой.
• «Длинные списки классов — это грязный код». Сначала они выглядят загромождёнными, но всё оформление элемента находится в одном месте. Повторяющиеся шаблоны обычно выносят в компоненты, например в один Button.
• «Если используешь Tailwind, нельзя писать собственный CSS». Обычный CSS можно писать в любой момент.

Что просить у ИИ-конструктора

• «Определи фирменные цвета и шрифты один раз как токены темы и используй их везде вместо жёстко заданных цветов».
• «Сделай так, чтобы у всех карточек, кнопок и полей были одинаковый радиус скругления и одинаковые отступы».
• «Проверь вёрстку по ширине телефона и исправь всё, что выходит за границы или слишком мало для нажатия».
• «Добавь тёмную тему через вариант dark: в Tailwind и проследи, чтобы контраст текста оставался читаемым».
• «Вынеси повторяющиеся стили кнопок в один переиспользуемый компонент Button».
• «Объясни классы Tailwind в этом разделе простыми словами».

Tailwind в Mythex

Новые проекты Mythex по умолчанию используют Tailwind вместе с React и TypeScript, поэтому визуальные изменения можно описывать обычными словами и сразу видеть их в живом предпросмотре. Если хотите увидеть код, редактор показывает каждый класс (только для чтения на тарифе Free, с возможностью правки на Pro). Если предпочитаете обычный CSS или другую настройку, скажите об этом в первом запросе — документация объясняет, как выбирается стек.

Вопросы