Tailwind CSS — утилитарный CSS фреймворк

Tailwind CSS — утилитарный CSS-фреймворк. Вместо написания CSS-классов со свойствами, ты применяешь к HTML-элементам готовые однозначные классы: bg-blue-600, px-4, rounded-lg. Это кардинально меняет процесс вёрстки.

Содержание

Что такое Tailwind CSS и в чём его идея
Установка Tailwind CSS через CDN — быстрый старт
Установка Tailwind через npm (для проектов)
Шпаргалка Tailwind CSS — базовые классы
Цвета
Отступы (spacing)
Типографика
Flexbox в Tailwind
Grid в Tailwind
Адаптивность в Tailwind — префиксы брейкпоинтов
Hover, focus, active — состояния в Tailwind
Tailwind и Bootstrap — сравнение
Часто задаваемые вопросы о Tailwind CSS
Tailwind или Bootstrap — что выбрать новичку?
Можно ли использовать Tailwind без npm и Node.js?
Как кастомизировать цвета и шрифты в Tailwind?

Что такое Tailwind CSS и в чём его идея

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

<!-- Обычный CSS подход -->
<button class="submit-btn">Отправить</button>

<!-- В CSS файле: -->
.submit-btn {
  background: #2563eb;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

<!-- Tailwind подход — вообще не нужен CSS файл -->
<button class="bg-blue-600 text-white px-5 py-2.5 rounded-lg font-semibold cursor-pointer border-none">
  Отправить
</button>

Редактор кода Tailwind CSS: кнопка собрана из utility классов bg-blue px rounded font hover — Utility-first подход делает каждое визуальное решение явным: bg-blue-600 задаёт фон, px-5 py-2.5 отступы, rounded-lg скругление.

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

Установка Tailwind CSS через CDN — быстрый старт

Для прототипов, обучения или небольших проектов — подключи Tailwind через CDN одной строкой.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мой сайт</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">

  <div class="max-w-2xl mx-auto mt-16 p-8 bg-white rounded-2xl shadow-lg">
    <h1 class="text-3xl font-bold text-gray-900 mb-4">Привет, Tailwind!</h1>
    <p class="text-gray-600 mb-6 leading-relaxed">
      Это первая страница с Tailwind CSS через CDN.
    </p>
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold
                   px-6 py-3 rounded-lg transition-colors duration-200">
      Начать
    </button>
  </div>

</body>
</html>

Tailwind CSS через CDN: index.html с script cdn.tailwindcss.com и браузерный предпросмотр страницы — CDN-подключение удобно для прототипов: одна строка в head, и классы Tailwind уже работают на странице.

Минус CDN-версии: файл большой (~3 МБ), содержит все возможные классы. Для продакшена используй npm-версию с purging.

Установка Tailwind через npm (для проектов)

# Установка
npm install -D tailwindcss
npx tailwindcss init    # создаёт tailwind.config.js

// tailwind.config.js — укажи файлы проекта для сканирования классов
module.exports = {
  content: [
    "./src/**/*.html",
    "./src/**/*.js",
    "./src/**/*.jsx",
    "./src/**/*.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* src/input.css — подключи директивы Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

# Собрать и следить за изменениями
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# В HTML подключи output.css как обычный стайлшит
# <link rel="stylesheet" href="/dist/output.css">

Tailwind CSS npm build: терминал с npx tailwindcss watch, tailwind.config.js и dist output css — Для продакшена лучше npm-сборка: Tailwind берёт классы из content-файлов и отдаёт компактный CSS.

Шпаргалка Tailwind CSS — базовые классы

Цвета

<!-- Цвет фона -->
class="bg-white"        <!-- #ffffff -->
class="bg-gray-100"     <!-- очень светло-серый -->
class="bg-gray-900"     <!-- почти чёрный -->
class="bg-blue-600"     <!-- синий -->
class="bg-red-500"      <!-- красный -->
class="bg-green-500"    <!-- зелёный -->
class="bg-transparent"  <!-- прозрачный -->

<!-- Цвет текста -->
class="text-white"
class="text-gray-900"   <!-- тёмный -->
class="text-gray-500"   <!-- серый -->
class="text-blue-600"
class="text-red-600"

<!-- Цвет рамки -->
class="border-gray-200"
class="border-blue-500"

Отступы (spacing)

<!-- Система: 1 = 4px, 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px -->

<!-- padding -->
class="p-4"        <!-- padding: 16px со всех сторон -->
class="px-6 py-3"  <!-- padding: 12px 24px -->
class="pt-8"       <!-- padding-top: 32px -->

<!-- margin -->
class="m-4"
class="mx-auto"    <!-- margin: 0 auto — центрирование -->
class="mt-4 mb-8"
class="ml-2"

<!-- gap (для flex/grid) -->
class="gap-4"
class="gap-x-6 gap-y-4"

Типографика

<!-- Размер шрифта -->
class="text-xs"    <!-- 12px -->
class="text-sm"    <!-- 14px -->
class="text-base"  <!-- 16px -->
class="text-lg"    <!-- 18px -->
class="text-xl"    <!-- 20px -->
class="text-2xl"   <!-- 24px -->
class="text-3xl"   <!-- 30px -->
class="text-4xl"   <!-- 36px -->

<!-- Жирность -->
class="font-normal"    <!-- 400 -->
class="font-medium"    <!-- 500 -->
class="font-semibold"  <!-- 600 -->
class="font-bold"      <!-- 700 -->

<!-- Выравнивание -->
class="text-left"
class="text-center"
class="text-right"

<!-- Межстрочный интервал -->
class="leading-tight"    <!-- 1.25 -->
class="leading-normal"   <!-- 1.5 -->
class="leading-relaxed"  <!-- 1.625 -->

Шпаргалка Tailwind CSS: bg text p px py rounded shadow font leading и карточка результата — Базовые классы легче запоминать через результат: цвет, spacing, типографика, рамки и тени сразу меняют компонент.

Flexbox в Tailwind

<div class="flex items-center justify-between gap-4">
  <!-- flex контейнер, элементы по центру вертикально,
       пространство между ними равномерно, gap 16px -->
</div>

<!-- flex-direction -->
class="flex-row"
class="flex-col"

<!-- justify-content -->
class="justify-start"
class="justify-center"
class="justify-between"
class="justify-evenly"

<!-- align-items -->
class="items-start"
class="items-center"
class="items-end"
class="items-stretch"

<!-- flex-wrap -->
class="flex-wrap"
class="flex-nowrap"

<!-- flex на элементе -->
class="flex-1"       <!-- flex: 1 1 0 -->
class="flex-none"    <!-- flex: none -->
class="flex-auto"    <!-- flex: 1 1 auto -->

Grid в Tailwind

<div class="grid grid-cols-3 gap-6">
  <!-- 3 равные колонки, gap 24px -->
</div>

class="grid-cols-1"
class="grid-cols-2"
class="grid-cols-3"
class="grid-cols-4"
class="grid-cols-12"

<!-- Адаптивные колонки -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- mobile: 1 col | tablet: 2 cols | desktop: 4 cols -->
</div>

Tailwind Flexbox и Grid: редактор с flex items-center justify-between grid-cols gap и браузерная сетка карточек — Flex и Grid в Tailwind читаются как пошаговая сборка layout: контейнер, выравнивание, количество колонок и расстояния.

Адаптивность в Tailwind — префиксы брейкпоинтов

Tailwind использует mobile-first подход. Классы без префикса применяются ко всем экранам. Префикс sm:, md:, lg: применяет стиль начиная с указанного брейкпоинта.

<!-- sm: ≥640px | md: ≥768px | lg: ≥1024px | xl: ≥1280px | 2xl: ≥1536px -->

<div class="text-sm md:text-base lg:text-lg">
  <!-- мобильные: text-sm | планшет: text-base | десктоп: text-lg -->
</div>

<!-- Адаптивная навигация -->
<nav class="hidden md:flex items-center gap-6">
  <!-- скрыта на мобильных, flex начиная с md -->
</nav>

<!-- Адаптивная сетка карточек -->
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl p-6 shadow-sm">Карточка 1</div>
  <div class="bg-white rounded-xl p-6 shadow-sm">Карточка 2</div>
  <div class="bg-white rounded-xl p-6 shadow-sm">Карточка 3</div>
</div>

Адаптивность Tailwind CSS: mobile tablet desktop preview с grid-cols-1 sm grid-cols-2 xl grid-cols-3 — Префиксы sm:, md:, lg: и xl: показывают, с какой ширины включается новый стиль.

Hover, focus, active — состояния в Tailwind

<!-- hover: — применяется при наведении мыши -->
<button class="bg-blue-600 hover:bg-blue-700 transition-colors">
  Кнопка
</button>

<!-- focus: — при фокусе (Tab или клик) -->
<input class="border border-gray-300 focus:border-blue-500
              focus:ring-2 focus:ring-blue-200 outline-none
              px-4 py-2 rounded-lg">

<!-- active: — в момент нажатия -->
<button class="bg-blue-600 active:scale-95 transition-transform">
  Нажми меня
</button>

<!-- group: — hover родителя влияет на дочерние -->
<div class="group hover:bg-blue-50 p-4 rounded-xl transition-colors">
  <h3 class="text-gray-900 group-hover:text-blue-600 transition-colors">
    Заголовок карточки
  </h3>
  <p class="text-gray-500">При hover на карточку заголовок синеет</p>
</div>

<!-- dark: — тёмная тема (если включен darkMode: 'class') -->
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Адаптируется к тёмной теме
</div>

Tailwind CSS состояния hover focus active group: курсор на кнопке, фокус input, active scale и group hover — Состояния в Tailwind удобно проверять глазами: hover меняет цвет, focus показывает кольцо, active реагирует на нажатие.

Tailwind и Bootstrap — сравнение

Критерий	Tailwind CSS	Bootstrap 5
Подход	Utility-first (атомарные классы)	Component-based (готовые компоненты)
Готовые компоненты	Нет (Tailwind UI — платно)	Да (много бесплатных)
Кастомизация	Полная — меняй всё	Через SASS переменные
Размер CSS в продакшне	Маленький (~5–15 КБ с purge)	Средний (~30–200 КБ)
Скорость разработки поначалу	Медленнее (нужно знать классы)	Быстрее (вставляешь готовое)
Уникальность дизайна	Высокая	«Bootstrap-look» — все похожи
Кривая обучения	Средняя	Низкая
Популярность (2025)	Растёт, лидер в новых проектах	Стабильна, много legacy

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

Часто задаваемые вопросы о Tailwind CSS

Tailwind или Bootstrap — что выбрать новичку?

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

Можно ли использовать Tailwind без npm и Node.js?

Да — через CDN. Добавь <script src="https://cdn.tailwindcss.com"></script> в <head> и используй все классы. Минус: CDN загружает все ~3 МБ стилей, что замедляет загрузку. Для продакшена используй npm с purging — итоговый CSS будет 5–20 КБ.

Как кастомизировать цвета и шрифты в Tailwind?

Всё настраивается в tailwind.config.js в секции theme.extend. Например, добавить свой цвет бренда: extend: { colors: { brand: '#2563eb' } } — и использовать: class="bg-brand text-brand". Аналогично для шрифтов, теней, брейкпоинтов и любых других значений.

Кастомные токены в tailwind.config.js превращаются в обычные классы проекта: bg-brand, text-brand, shadow-card.