Tailwind CSS за 14 минут

Tailwind CSS — это utility-first фреймворк: вместо того чтобы писать собственный CSS, вы собираете дизайн прямо в HTML из маленьких готовых классов вроде `p-4`, `flex` или `text-center`. Этот тур — вся суть Tailwind на одной странице, в плотно закомментированном коде. Читайте сверху вниз за 14 минут.

Что такое Tailwind (utility-first)

Один класс — одно CSS-свойство. Вы не выдумываете имена классов и не переключаетесь между HTML и .css-файлом — стилизуете прямо в разметке.

<!-- Обычный CSS: нужен класс .btn и отдельный файл стилей -->
<button class="btn">Кнопка</button>
<!-- В .css: .btn { padding: 8px 16px; background: blue; color: white } -->

<!-- Tailwind: те же стили собраны из утилит прямо здесь -->
<button class="px-4 py-2 bg-blue-500 text-white">Кнопка</button>
<!-- px-4 = горизонтальные отступы, py-2 = вертикальные -->
<!-- bg-blue-500 = синий фон, text-white = белый текст -->

<!-- Философия: маленькие переиспользуемые классы вместо -->
<!-- кастомного CSS. Дизайн виден сразу в HTML, ничего -->
<!-- не нужно искать в других файлах. -->

Подключение

Для продакшена ставят через сборку (CLI / PostCSS), для быстрых проб хватает CDN.

<!-- Вариант 1: CDN — вставить в <head>, ничего не собирать. -->
<!-- Подходит для прототипов и обучения, НЕ для продакшена. -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Вариант 2: CLI — для реальных проектов. -->
<!-- 1) npm install -D tailwindcss -->
<!-- 2) npx tailwindcss init  (создаст tailwind.config.js) -->
<!-- 3) собрать CSS, отслеживая изменения: -->
<!--    npx tailwindcss -i input.css -o output.css --watch -->
<!-- В input.css пишут директивы: -->
<!--    @tailwind base; @tailwind components; @tailwind utilities; -->
<!-- Сборщик оставит в output.css только реально используемые классы. -->
<link rel="stylesheet" href="output.css">

Отступы (padding, margin, gap между детьми)

Шкала единая: число — это шаг сетки (1 = 0.25rem = 4px). Буква задаёт сторону.

<!-- p = padding (внутренний), m = margin (внешний) -->
<div class="p-4">padding со всех сторон (4 = 16px)</div>
<div class="m-2">margin со всех сторон (2 = 8px)</div>

<!-- Стороны: t=top, r=right, b=bottom, l=left -->
<!-- Оси: x = лево+право, y = верх+низ -->
<div class="px-6 py-3">по горизонтали 24px, по вертикали 12px</div>
<div class="mt-8 mb-4">сверху 32px, снизу 16px</div>

<!-- space-x / space-y — отступ МЕЖДУ дочерними элементами -->
<div class="flex space-x-4">
  <span>A</span><span>B</span><span>C</span>
  <!-- между A-B и B-C появится зазор 16px -->
</div>

Размеры (width, height, ограничения)

<!-- w = width, h = height. Числа — та же шкала, что у отступов -->
<div class="w-32 h-16">ширина 128px, высота 64px</div>

<!-- Дроби и ключевые слова -->
<div class="w-1/2">половина ширины родителя (50%)</div>
<div class="w-full">вся ширина родителя (100%)</div>
<div class="h-screen">высота во весь экран (100vh)</div>

<!-- Ограничители: max-w- и min-h- -->
<div class="max-w-md mx-auto">
  <!-- max-w-md ограничивает ширину (~28rem), -->
  <!-- mx-auto центрирует блок по горизонтали -->
</div>
<div class="min-h-screen">минимум на всю высоту экрана</div>

Цвета (фон, текст, граница, палитра и оттенки)

Формат: свойство-цвет-оттенок. Оттенки идут от 50 (самый светлый) до 900/950 (самый тёмный).

<!-- bg- = фон, text- = цвет текста, border- = цвет рамки -->
<div class="bg-blue-500 text-white">синий фон, белый текст</div>

<!-- Шкала оттенков одного цвета: чем больше число, тем темнее -->
<div class="bg-gray-50">почти белый</div>
<div class="bg-gray-200">светло-серый</div>
<div class="bg-gray-500">средний серый</div>
<div class="bg-gray-900">почти чёрный</div>

<!-- Палитра именованная: slate, gray, red, orange, amber, -->
<!-- yellow, green, teal, blue, indigo, purple, pink и др. -->
<p class="text-red-600">красный текст</p>
<p class="text-green-600">зелёный текст</p>
<div class="border border-indigo-400">рамка цвета indigo</div>

Типографика

<!-- Размер шрифта: text-xs < sm < base < lg < xl < 2xl ... -->
<p class="text-xs">мелкий</p>
<p class="text-base">обычный (16px по умолчанию)</p>
<p class="text-2xl">крупный заголовок</p>

<!-- Насыщенность: font-light, font-normal, font-bold ... -->
<p class="font-bold">жирный текст</p>
<p class="font-light italic">тонкий курсив</p>

<!-- Выравнивание, межстрочный (leading) и межбуквенный (tracking) -->
<p class="text-center">по центру</p>
<p class="leading-relaxed">увеличенный интервал между строками</p>
<p class="tracking-wide uppercase">РАЗРЯДКА И ВЕРХНИЙ РЕГИСТР</p>

Flexbox

flex включает flex-контейнер, далее раскладываем детей по осям.

<!-- justify- = главная ось, items- = поперечная ось -->
<div class="flex justify-between items-center">
  <!-- justify-between: дети разъезжаются по краям -->
  <!-- items-center: выравнивание по центру по вертикали -->
  <span>Логотип</span>
  <span>Меню</span>
</div>

<!-- Частые значения justify: start, center, end, between, around -->
<div class="flex justify-center items-center h-32">
  идеально по центру и по горизонтали, и по вертикали
</div>

<!-- gap- = зазор между flex-детьми; flex-col = вертикально -->
<div class="flex flex-col gap-4">
  <div>строка 1</div>
  <div>строка 2 (между ними 16px)</div>
</div>

Grid

<!-- grid включает сетку, grid-cols-N задаёт число колонок -->
<div class="grid grid-cols-3 gap-4">
  <!-- 3 равные колонки, зазор 16px между ячейками -->
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

<!-- Ячейка может занимать несколько колонок через col-span-N -->
<div class="grid grid-cols-4 gap-2">
  <div class="col-span-2">широкая ячейка на 2 колонки</div>
  <div>узкая</div>
  <div>узкая</div>
</div>

Отображение и позиционирование

<!-- display: block, inline-block, hidden (display:none) -->
<div class="block">занимает всю строку</div>
<span class="inline-block">строчный, но с размерами</span>
<div class="hidden">полностью скрыт</div>

<!-- position: родителю relative, ребёнку absolute -->
<div class="relative w-40 h-40 bg-gray-200">
  <span class="absolute top-0 right-0 bg-red-500 text-white px-2">
    <!-- прижато к правому верхнему углу родителя -->
    NEW
  </span>
</div>

<!-- fixed закрепляет относительно окна, z-10 — слой выше -->
<div class="fixed bottom-4 right-4 z-10">плавающая кнопка</div>

Границы и тени

<!-- rounded скругляет углы: sm, (base), lg, xl, full (круг) -->
<div class="rounded-lg">скруглённые углы</div>
<img class="rounded-full w-16 h-16" src="avatar.jpg" alt="">

<!-- border задаёт рамку; можно толщину и цвет -->
<div class="border border-gray-300">тонкая рамка</div>
<div class="border-2 border-blue-500">рамка потолще, синяя</div>

<!-- shadow добавляет тень: sm, (base), md, lg, xl -->
<div class="shadow-md">лёгкая тень</div>
<div class="shadow-xl rounded-xl p-6">карточка с глубокой тенью</div>

Состояния и варианты (hover, focus, active)

Префикс через двоеточие применяет класс только в нужном состоянии.

<!-- hover: срабатывает при наведении мыши -->
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2">
  <!-- обычно синяя, при наведении становится темнее -->
  Наведи на меня
</button>

<!-- focus: при фокусе (клик/таб), active: при нажатии -->
<input class="border focus:border-blue-500 focus:ring px-3 py-2">
<button class="bg-green-500 active:bg-green-800 px-4 py-2">
  темнеет в момент клика
</button>

<!-- transition сглаживает смену состояния анимацией -->
<a class="text-blue-600 hover:text-blue-900 transition">ссылка</a>

Адаптивность (брейкпоинты)

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

<!-- Брейкпоинты: sm=640px, md=768px, lg=1024px, xl=1280px -->
<!-- 1 колонка на телефоне, 2 от md, 4 от lg -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>ячейка</div><div>ячейка</div>
  <div>ячейка</div><div>ячейка</div>
</div>

<!-- Размер текста и отступы тоже можно менять по ширине -->
<h2 class="text-xl md:text-3xl lg:text-5xl">растущий заголовок</h2>

<!-- Показать/скрыть элемент на разных экранах -->
<div class="block md:hidden">видно только на мобильном</div>
<div class="hidden md:block">видно только на десктопе</div>

Тёмная тема (dark:)

<!-- Префикс dark: применяет класс в тёмном режиме -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  <!-- светлая тема: белый фон, тёмный текст -->
  <!-- тёмная тема: тёмный фон, белый текст -->
  Контент, который адаптируется под тему
</div>

<!-- dark: комбинируется с другими вариантами -->
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 px-4 py-2 rounded">
  кнопка, корректная в обеих темах
</button>
<!-- Режим включается классом dark на <html> (по настройке -->
<!-- darkMode в конфиге) или по системной теме пользователя. -->

Произвольные значения [...]

Когда шкалы не хватает — пишите точное значение в квадратных скобках.

<!-- Точные размеры, которых нет в стандартной шкале -->
<div class="w-[137px] h-[42px]">ровно 137 на 42 пикселя</div>
<div class="top-[3px] left-[7px] relative">тонкая подгонка</div>

<!-- Произвольный цвет (HEX) и произвольный размер шрифта -->
<p class="text-[#1da1f2] text-[13px]">фирменный синий, 13px</p>

<!-- Работает почти с любым свойством -->
<div class="bg-[url('/hero.jpg')] grid-cols-[1fr_2fr]">
  <!-- произвольная картинка фоном и нестандартная сетка -->
</div>

Типичный компонент — карточка

Финальный пример собирает почти всё из тура в один реальный блок.

<!-- Карточка: ограничена по ширине, скруглена, с тенью, -->
<!-- корректна в тёмной теме -->
<div class="max-w-sm mx-auto rounded-xl shadow-lg overflow-hidden bg-white dark:bg-gray-800">

  <img class="w-full h-40 object-cover" src="cover.jpg" alt="">

  <!-- p-6 = внутренние отступы, space-y-3 = зазор между детьми -->
  <div class="p-6 space-y-3">

    <h3 class="text-xl font-bold text-gray-900 dark:text-white">
      Заголовок карточки
    </h3>

    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
      Короткое описание. Текст приглушённый, со свободным
      межстрочным интервалом.
    </p>

    <!-- flex + justify-between разводит цену и кнопку по краям -->
    <div class="flex justify-between items-center pt-2">
      <span class="text-2xl font-bold text-blue-600">1990 ₽</span>
      <button class="px-4 py-2 rounded-lg bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white transition">
        Купить
      </button>
    </div>

  </div>
</div>