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

Отступы (margin и padding)

Tailwind использует короткие обозначения:

• m — margin (внешний отступ),
• p — padding (внутренний отступ).

Можно уточнять стороны:

• mt-4 — верхний отступ,
• mb-2 — нижний отступ,
• ml-3 — левый отступ,
• mx-2 — горизонтальные отступы,
• py-6 — вертикальные отступы.

Числа (1, 2, 4, 6, 8...) соответствуют значениям из «шкалы Tailwind». Эта шкала привязана к rem и обычно кратна 4px. Например:

• p-4 = 1rem (16px),
• m-6 = 1.5rem (24px).

Если стандартных значений мало, можно использовать «процентные» и «автоматические» варианты:

• m-auto — центрирование блока по горизонтали,
• p-0 — убирает отступы,
• m-px — минимальный отступ 1px.

Пример:

<div class="p-4 m-6 bg-gray-100 rounded">
  Контейнер с отступами
</div>

Цвета

Tailwind имеет встроенную палитру с сотнями оттенков. Цвет задаётся в формате:

• bg-blue-500 — фон,
• text-red-600 — цвет текста,
• border-gray-300 — цвет рамки.

В названии сначала идёт цвет (blue, red, gray), а затем яркость (100–900). Чем больше число, тем цвет темнее. Например:

• blue-100 — очень светлый голубой,
• blue-900 — почти тёмно-синий.

Важно: палитра легко настраивается в файле конфигурации tailwind.config.js, можно добавить фирменные цвета проекта.

Пример:

<p class="text-green-600">Зелёный текст</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Синяя кнопка
</button>

Текст и шрифты

Утилиты для текста позволяют управлять:

• text-xs, text-base, text-xl, text-3xl — размером шрифта,
• font-bold, font-semibold, font-light — жирностью,
• text-left, text-center, text-right — выравниванием.

Также доступны:

• leading-6, leading-relaxed — межстрочные интервалы,
• tracking-wide — межбуквенные расстояния.

Пример:

<h1 class="text-3xl font-bold text-center">
  Заголовок страницы
</h1>

Responsive (адаптивность)

Tailwind работает по принципу mobile-first: стили по умолчанию применяются к мобильным устройствам, а с помощью префиксов можно задавать поведение для более широких экранов.

Основные брейкпоинты:

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

Например, можно сделать текст больше на десктопах:

<p class="text-base sm:text-lg lg:text-xl">
  Этот текст увеличивается на больших экранах
</p>

Ещё один важный момент: можно комбинировать адаптивность с псевдоклассами, например:

<button class="bg-blue-500 hover:bg-blue-600 md:bg-green-500 md:hover:bg-green-600">
  Адаптивная кнопка
</button>

На мобильных кнопка будет синей, а на десктопе — зелёной.

Мини-проект: карточка товара

Попробуем объединить всё вместе:

<div class="max-w-sm mx-auto p-4 bg-white rounded-lg shadow">
  <h2 class="text-xl font-semibold mb-2">Наушники</h2>
  <p class="text-gray-600 mb-4">
    Беспроводные, с шумоподавлением
  </p>
  <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
    Купить
  </button>
</div>

• max-w-sm ограничивает ширину,
• mx-auto центрирует блок,
• shadow добавляет тень,
• hover:bg-blue-600 меняет цвет кнопки при наведении,
• transition добавляет плавность изменения.

Упражнение

1. Создай карточку с заголовком, описанием и кнопкой.
2. Сделай так, чтобы на мобильных текст был обычного размера, а на десктопах — крупнее.
3. Попробуй изменить фон кнопки и цвет текста при наведении.
4. Добавь тень и поэкспериментируй с отступами.

👉 В следующей статье разберём систему цветов и шрифтов более подробно, а также подключим свои.