Учебная платформа AST-STUDY

← Назад к курсу

Учебное пособие по CSS и Tailwind CSS

Введение

CSS (Cascading Style Sheets) — это язык таблиц стилей, который используется для описания внешнего вида документа, написанного на HTML. CSS отвечает за цвета, шрифты, расположение элементов, анимацию и адаптивность веб-страниц. Без CSS сайты выглядели бы как обычные текстовые документы.

Tailwind CSS — это современный утилитарный CSS-фреймворк, который предлагает готовые классы для быстрой стилизации интерфейсов. Вместо того чтобы писать собственные CSS-правила, вы комбинируете классы в HTML.

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

Часть 1. Основы CSS

1.1 Подключение CSS к HTML

Существует три способа:

  1. Внешний файл (рекомендуется):

    <link rel="stylesheet" href="style.css">

  2. Внутренний стиль (тег <style> внутри <head>):

    <style>
  body { background: #f0f0f0; }
</style>

  3. Инлайн-стиль (атрибут style):

    <p style="color: red;">Текст</p>

1.2 Синтаксис CSS

Правило CSS состоит из селектора и блока объявлений:

селектор {
  свойство: значение;
  свойство: значение;
}

Пример:

h1 {
  color: blue;
  font-size: 24px;
}

1.3 Селекторы

Селектор Пример Описание
Универсальный * Все элементы
Тега p Все <p>
Класса .button Элементы с классом button
ID #header Элемент с id header
Групповой h1, h2 Несколько типов
Вложенный article p <p> внутри <article>
Дочерний ul > li Прямой потомок

1.4 Каскадность, специфичность и наследование

  • Каскадность — при нескольких правилах применяется последнее по порядку (при одинаковой специфичности).
  • Специфичность — вес селектора (ID > класс > тег). Чем выше вес, тем приоритетнее правило.
  • Наследование — некоторые свойства (например, color, font-family) передаются дочерним элементам.

1.5 Модель коробки (Box Model)

Каждый элемент HTML — это прямоугольник, состоящий из:

  • Content (содержимое)
  • Padding (внутренний отступ)
  • Border (рамка)
  • Margin (внешний отступ)

Box Model

div {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

Свойство box-sizing: border-box; включает padding и border в общую ширину/высоту — это удобно.

1.6 Позиционирование

Значение Поведение
static По умолчанию, в потоке документа
relative Смещается относительно обычной позиции
absolute Относительно ближайшего позиционированного предка
fixed Относительно окна браузера, не двигается при прокрутке
sticky Как relative/fixed — прилипает при прокрутке

1.7 Flexbox

Flexbox — удобный способ выравнивания элементов в строку или столбец.

.container {
  display: flex;
  flex-direction: row;        /* row, column */
  justify-content: center;    /* выравнивание по главной оси */
  align-items: center;        /* по поперечной оси */
  gap: 16px;                  /* промежутки между элементами */
}

1.8 Grid

CSS Grid предназначен для двумерной раскладки.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* три колонки */
  gap: 20px;
}

1.9 Адаптивность — медиа-запросы

Меняем стили в зависимости от ширины экрана:

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Часть 2. Проблемы традиционного CSS

На больших проектах классический CSS сталкивается с трудностями:

  • Глобальные имена — легко случайно переопределить стили.
  • Разрастание файлов — трудно поддерживать.
  • Повторение — одни и те же свойства пишутся снова и снова.
  • Сложность адаптивности — медиа-запросы разбросаны по файлам.

Эти проблемы частично решают препроцессоры (Sass, Less), методологии (БЭМ) или CSS-in-JS. Но Tailwind предлагает другой подход: утилитарные классы.

Часть 3. Tailwind CSS

3.1 Что такое Tailwind?

Tailwind — фреймворк, состоящий из множества маленьких классов, каждый из которых отвечает за одно CSS-свойство. Например:

  • text-center → text-align: center;
  • bg-blue-500 → background-color: #3b82f6;
  • p-4 → padding: 1rem;

Вместо того чтобы писать:

.button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

Вы просто добавляете классы в HTML:

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Нажми меня
</button>

3.2 Установка и начало работы

Быстрый старт через CDN (для экспериментов)

<script src="https://cdn.tailwindcss.com"></script>

Но для реальных проектов лучше использовать npm (PostCSS, PurgeCSS для минификации).

Установка с npm (проект на Node.js)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Настройте tailwind.config.js и импортируйте Tailwind в CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.3 Основные классы Tailwind

Цвета и фон

  • bg-red-500, bg-blue-200, bg-gray-800
  • text-white, text-black, text-green-600

Размеры текста

  • text-xs, text-sm, text-base, text-lg, text-xl, text-2xl ... text-9xl

Отступы (Padding & Margin)

Формула: {property}{side}-{size}

  • p-4 — padding со всех сторон (1rem = 16px)
  • px-2 — padding по горизонтали
  • py-4 — padding по вертикали
  • mt-1, mr-2, mb-3, ml-4 — отступы сверху, справа, снизу, слева
  • m-auto — margin: auto

Размеры по шкале: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96. (в единицах rem)

Ширина и высота

  • w-full (100%), w-1/2, w-1/3, w-1/4
  • h-screen (высота экрана), h-32 (8rem)

Flexbox

  • flex, inline-flex
  • flex-row, flex-col
  • justify-start, justify-center, justify-between, justify-end
  • items-center, items-start, items-end
  • gap-4

Grid

  • grid, grid-cols-3 (три колонки), grid-cols-12
  • col-span-2 (занимает 2 из 3 колонок)

Рамки и скругление

  • border, border-2, border-t-0
  • border-gray-300, border-red-500
  • rounded, rounded-lg, rounded-full

Тени

  • shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl

Псевдоклассы

Tailwind использует префиксы:

  • hover:bg-blue-600 — при наведении
  • focus:outline-none — при фокусе
  • active:scale-95 — при нажатии
  • disabled:opacity-50 — для disabled

Адаптивность (медиа-запросы)

Префиксы для брейкпоинтов (по умолчанию):

  • sm: — 640px
  • md: — 768px
  • lg: — 1024px
  • xl: — 1280px
  • 2xl: — 1536px

Пример: кнопка на мобильных устройствах занимает всю ширину, а на больших экранах — 300px.

<button class="w-full md:w-300 ...">

3.4 Практические примеры

Пример 1: Кнопка с разными состояниями

<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded shadow transition duration-200">
  Отправить
</button>

Пример 2: Карточка товара

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="photo.jpg" alt="Товар">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Заголовок карточки</div>
    <p class="text-gray-700 text-base">
      Описание товара. Этот текст будет выглядеть аккуратно.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#хэштег</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#новинка</span>
  </div>
</div>

Пример 3: Адаптивная навигационная панель

<nav class="bg-white shadow-md p-4 flex flex-col sm:flex-row justify-between items-center">
  <div class="text-xl font-bold mb-2 sm:mb-0">Мой сайт</div>
  <div class="space-x-4">
    <a href="#" class="text-gray-700 hover:text-indigo-600">Главная</a>
    <a href="#" class="text-gray-700 hover:text-indigo-600">О нас</a>
    <a href="#" class="text-gray-700 hover:text-indigo-600">Контакты</a>
  </div>
</nav>

Пример 4: Простая форма

<form class="bg-white p-6 rounded shadow-md w-full max-w-md">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
      Email
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="ivan@example.com">
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
      Пароль
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
      Войти
    </button>
  </div>
</form>

3.5 Преимущества и недостатки Tailwind

Преимущества

✅ Скорость — не нужно придумывать имена классов, писать CSS с нуля.
✅ Консистентность — готовые значения (отступы, цвета, шрифты) соответствуют дизайн-системе.
✅ Адаптивность — удобные префиксы прямо в классе.
✅ Не изолированность — стили не конфликтуют (каждый класс независим).
✅ Маленький CSS на выходе — PurgeCSS удаляет неиспользуемые классы.
✅ Отличная документация — tailwindcss.com.

Недостатки

❌ Захламление HTML — атрибут class может стать очень длинным.
❌ Кривая обучения — нужно выучить имена классов.
❌ Не всегда удобно — сложные селекторы или вложенные стили (например, :first-child) лучше писать в CSS.
❌ Зависимость от инструментов сборки — для реальных проектов требуется PostCSS.

3.6 Советы по использованию Tailwind

  • Выносите повторяющиеся комбинации в компоненты (например, с помощью @apply или в реальные компоненты React/Vue).
  • Настройте конфигурацию — измените брейкпоинты, цвета, шрифты в tailwind.config.js.
  • Используйте плагин для IDE (например, Tailwind CSS IntelliSense для VSCode).
  • Не бойтесь миксовать — Tailwind хорошо работает вместе с обычным CSS для сложных случаев.

Часть 4. Сравнение классического CSS и Tailwind

Аспект Классический CSS Tailwind CSS
Скорость написания Средняя, требует именования Высокая
Размер HTML Маленький Крупный (много классов)
Повторное использование Через классы-компоненты Через компоненты фреймворка
Изучение Нужно знать CSS Нужно знать CSS + имена Tailwind
Глобальные конфликты Возможны Почти отсутствуют
Инструменты Можно без сборки Нужен PostCSS для продакшена

Заключение

CSS — это фундамент веб-дизайна. Понимание каскада, блочной модели, Flexbox и Grid необходимо любому frontend-разработчику.

Tailwind CSS не заменяет знания CSS, а надстраивается над ним, предлагая удобный синтаксис и набор утилит. Он особенно полезен в проектах, где важна скорость и поддерживаемость, а также в командах, использующих компонентный подход (React, Vue, Svelte).

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

Полезные ресурсы

Учебное пособие подготовлено для начинающих разработчиков. Удачи в изучении CSS и Tailwind!

Дополнительный материал

Вопросы учеников к ИИ-помощнику и ответы по теме урока

Вопрос: alexis@ts-group.ru · 2026-05-01 15:29
Какие еще есть фреймфорки для CSS?
Ответ ИИ:

CSS-фреймворки — это библиотеки готовых стилей и классов, ускоряющие разработку интерфейсов. Помимо Tailwind CSS, популярны Bootstrap, Foundation, Bulma, Materialize и Tachyons.

Основные альтернативы Tailwind CSS:

  • Bootstrap
    — Самый известный фреймворк.
    — Готовые компоненты (карточки, навигация, модальные окна), сетка на Flexbox/Grid.
    — Подходит для быстрого старта, но может «перегружать» проект лишним кодом.

  • Foundation
    — Гибкий и мощный, особенно для сложных адаптивных интерфейсов.
    — Хорош для enterprise-проектов.
    — Меньше «шаблонности» визуала по сравнению с Bootstrap.

  • Bulma
    — Современный, чистый CSS-фреймворк (без JS по умолчанию).
    — Использует Flexbox, модульная структура.
    — Легко кастомизируется через переменные Sass.

  • Materialize
    — Реализует Google Material Design.
    — Включает JS-компоненты (карусели, dropdown, modal).
    — Хорош, если нужна именно «Material» эстетика.

  • Tachyons
    — Утилитарный, как Tailwind, но с другим именованием классов (например, bg-near-white).
    — Очень компактный, но менее популярен сегодня.

💡 Совет: Для обучения и гибкости — начните с Tailwind (как в курсе) или Bulma. Для быстрого прототипа — Bootstrap.

Упражнение:
Создайте простую карточку товара (заголовок, описание, кнопка) двумя способами:
1) с помощью Bootstrap (через CDN),
2) с помощью Tailwind CSS.
Сравните объём HTML и удобство правки стилей.

👉 Демонстрация Bootstrap на CodePen
👉 Аналогичная карточка на Tailwind

Готов помочь с реализацией — просто скажите! 😊