Блок 4 · Урок 5 из 7

Оформление: Tailwind и UI-библиотеки

как современные приложения делают красивыми — три подхода к стилям и почему вайб-кодеру это упрощает жизнь.

⏱ ≈ 6 минут 🎨 CSS, Tailwind, UI 🎯 цель: читать className с кучей классов без тревоги

Зачем это вам

Когда агент говорит «сделаем на Tailwind» или «возьмём shadcn», это не каприз — это выбор инструмента оформления. Понимая разницу между тремя подходами к стилям, вы сможете правильно поставить задачу, оценить результат и не пугаться разметки вроде className="flex p-4 rounded-lg bg-teal-600 text-white" — это не ошибка, это норма.

Три способа сделать красиво

CSS, Tailwind, UI-библиотека — в чём разница

В блоке 1 мы договорились: CSS — это «оформление, внешний вид» страницы. Но то, как именно этот CSS организован, бывает принципиально разным.

Обычный CSS — вы или агент пишете стили в отдельном файле styles.css: «кнопка — зелёная, с отступом 16px, скруглением 8px». Полный контроль над каждым пикселем, но каждый элемент нужно описывать с нуля. На крупном проекте — долго и трудно поддерживать единообразие.

Tailwind CSS1 — это фреймворк (готовый инструментарий) utility-классов (коротких классов-утилит). Вместо отдельного файла стилей вы задаёте оформление прямо в разметке через заранее заготовленные классы: p-4 — отступ, text-lg — крупный текст, bg-teal-600 — цвет фона. Быстро, единообразно по всему проекту, но разметка становится «шумнее» — классов много.

UI-библиотека компонентов2 — готовые оформленные компоненты: кнопки, модальные окна (всплывающие поверх страницы), формы. Вы просто подключаете библиотеку и используете готовый компонент <Button> или <Dialog> — он уже красив и стилизован. Популярные примеры: shadcn/ui, MUI (Material UI), Chakra UI.

📌 Практическое правило: если в коде есть файл tailwind.config.js или в package.json есть "tailwindcss" — проект использует Tailwind. Если есть "@shadcn/ui", "@mui/material" или "@chakra-ui/react" — подключена UI-библиотека.

Посмотрите в код

Как выглядит Tailwind в разметке

Вот настоящая Tailwind-кнопка — без единой строчки в отдельном CSS-файле:

<button class="flex p-4 rounded-lg bg-teal-600 text-white">
  Купить
</button>

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

Аналогия, которую можно пересказать

Ремонт квартиры: красить с нуля / готовые панели / готовый гарнитур

«Красить и пилить с нуля»— обычный CSS: максимум контроля, дольше всего
«Каталог готовых смесей и панелей»— Tailwind: быстро комбинируете стандартные элементы прямо на месте
«Готовый мебельный гарнитур»— UI-библиотека (shadcn, MUI): привезли красивые шкафы, которые уже сочетаются
«Единый стиль во всей квартире»— дизайн-система: согласованный вид на всех экранах

Tailwind + UI-библиотека вместе — это «каталог смесей» плюс «готовый гарнитур»: быстро, красиво, единообразно — без отдельного дизайнера.

Запомните одно

Tailwind + UI-библиотека = быстрый красивый результат без дизайнера

Вот почему агент почти всегда выбирает именно этот стек: Tailwind даёт скорость и единообразие (не надо придумывать названия классов и писать CSS с нуля), а UI-библиотека даёт готовые компоненты, которые уже хорошо выглядят и сочетаются между собой.

Когда вы видите className с десятком слов — это не хаос. Это Tailwind-утилиты, каждая из которых отвечает за одну конкретную деталь оформления.

Что это даёт на практике

Фраза агента → что он имеет в виду

«Сделаем на Tailwind»
Буду стилизовать utility-классами прямо в разметке, без отдельного CSS-файла.
«Возьмём shadcn / MUI»
Подключу готовую библиотеку красивых компонентов — кнопки, формы, модалки уже оформлены.
«className с кучей классов»
Это Tailwind-утилиты: отступы, цвета, расположение — каждый класс за одну деталь.
«Приведём к дизайн-системе»
Сделаю единый согласованный стиль для всех экранов приложения.

CSS-подход — то, как организованы стили: вручную, utility-классами или через библиотеку компонентов.

Tailwind CSS — фреймворк utility-классов: стили задаются короткими классами прямо в разметке, без отдельного CSS-файла.

UI-библиотека компонентов — готовый набор оформленных компонентов (shadcn/ui, MUI, Chakra): берёте и используете.

Дизайн-система — единый набор правил и компонентов для согласованного вида на всех экранах.

Проверьте себя

Четыре вопроса с мгновенной проверкой

1. Что такое Tailwind CSS?

2. Что даёт UI-библиотека (shadcn / MUI)?

3. Почему вайб-кодеру удобны Tailwind + UI-библиотека?

4. Агент написал className с десятком слов. Это, скорее всего…

Куда мы идём

Программа курса — 7 блоков