Tailwind CSS — это utility-first фреймворк: вы собираете интерфейс из маленьких утилит прямо в разметке, не переключаясь между HTML и длинными кастомными стилями. Классы вроде flex, pt-4, text-center, text-white, font-medium или даже rotate-90 комбинируются как «лего», позволяя буквально за минуты создавать аккуратные, отзывчивые и доступные компоненты.

Зачем это нужно: преимущества подхода utility-first

• Вы быстрее видите результат: меняете класс — сразу меняется внешний вид.
• Дизайн получается предсказуемым: каждый класс делает одну понятную вещь.
• Меньше «магии» в CSS: композиция утилит избавляет от проблем со специфичностью.
• Производство кода масштабируется: команды легко договариваются на уровне утилит, а не бесконечных «компонентных» стилей.
• Сборка вычищает неиспользуемые стили, поэтому итоговый CSS маленький и быстрый.

Как это выглядит на практике

Ниже — кнопка, собранная целиком из утилитных классов. Ни одной строчки «кастомного» CSS:

<button class="px-4 py-2 text-white bg-sky-600 rounded-md shadow hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-400" >Нажми меня</button>

Адаптивность без боли: префиксы брейкпоинтов

Tailwind — мобильный по умолчанию. Чтобы применить стиль с определённого размера экрана и выше, добавьте префикс брейкпоинта: sm:, md:, lg:, xl:. Например, меняем внутренние отступы по мере роста экрана:

<div class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">Контент</div>

Темизация на CSS-переменных: легко и прозрачно

Хочется свой шрифт, скейл типографики или фирменный мятный цвет? Определите переменные — и используйте их в утилитах:

@theme {
  --font-sans: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;

  --color-mint-100: oklch(0.97 0.15 145);
  --color-mint-200: oklch(0.92 0.18 145);
  --color-mint-300: oklch(0.85 0.22 145);
  --color-mint-400: oklch(0.78 0.25 145);
  --color-mint-500: oklch(0.7 0.28 145);
  --color-mint-600: oklch(0.63 0.3 145);
  --color-mint-700: oklch(0.56 0.32 145);
  --color-mint-800: oklch(0.48 0.35 145);
  --color-mint-900: oklch(0.4 0.37 145);
  --color-mint-950: oklch(0.3 0.4 145);
}

P3-палитры: более сочные цвета «из коробки»

Цвета в широком охвате (P3) делают интерфейс заметно живее на современных дисплеях — без необходимости разбираться в тонкостях цветовых пространств. Вы используете привычные семейства и градации (50–950), а движок подбирает яркие значения под капотом.

• Семейства: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.
• Эти же имена работают с вариантами (например, text-sky-500, bg-emerald-700).

Фильтры и «стеклянность»: blur, контраст, насыщенность

Хотите модный стеклянный фон или акцентную картинку? Наращивайте фильтры слоями — до тех пор, пока дизайнер не попросит остановиться.

<img src="/images/cover.jpg" alt="Обложка" class="rounded-xl shadow-xl blur-sm brightness-150 contrast-150 saturate-200" />

Тёмная тема одним префиксом

Не любите слепящий белый? Любой цвет можно «перекрасить» в тёмном режиме с помощью варианта dark::

<p class="text-gray-800 dark:text-gray-300">Этот текст заботится о ваших глазах.</p>

CSS Grid и сложные раскладки становятся понятнее

Управлять сеткой прямо в HTML намного проще, чем держать ментальную модель из десятков селекторов и модификаторов:

<ul class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <li class="p-4 rounded-lg shadow">Treehouses</li>
  <li class="p-4 rounded-lg shadow">Mansions</li>
  <li class="p-4 rounded-lg shadow">Lakefront cottages</li>
  <li class="p-4 rounded-lg shadow">Designer homes</li>
</ul>

Контейнерные запросы: компоненты реагируют на ширину блока, а не окна

Помечаем родителя как контейнер и меняем дочерние элементы в зависимости от его размеров. Синтаксис с @ — наглядный и компактный:

<div class="@container">
  <div class="grid grid-cols-1 gap-4 @sm:grid-cols-2">
    <img src="/img/photo-1.jpg" class="aspect-square @sm:aspect-3/2 object-cover" />
    <img src="/img/photo-2.jpg" class="aspect-square @sm:aspect-3/2 object-cover" />
    <img src="/img/photo-3.jpg" class="aspect-square @sm:aspect-3/2 object-cover" />
    <img src="/img/photo-4.jpg" class="aspect-square @sm:aspect-3/2 object-cover" />
  </div>
</div>

Переходы и анимации «как ожидается»

Достаточно пары утилит, чтобы добавить плавность:

<div class="transition ease-out duration-200 hover:scale-105"> Наведи на меня </div>

3D-трансформации и точность настроек

Иногда двух измерений мало. Включайте GPU и задавайте точные значения через произвольные CSS-выражения:

<div class="transform-gpu [transform:rotateY(18deg)_rotateX(6deg)] transition hover:[transform:rotateY(0)_rotateX(0)]" />

Слои каскада: порядок важен

Tailwind использует CSS cascade layers, чтобы избавить вас от войны специфичностей: сначала тема и базовые стили, затем компоненты, затем утилиты.

@layer theme, base, components, utilities;

@layer theme {
  :root {
    /* переменные темы */
  }
}

@layer base {
  /* базовые (preflight) стили */
}

@layer components {
  /* ваши компоненты */
}

@layer utilities {
  /* при необходимости — свои утилиты */
}

Логические свойства и поддержка направлений текста

Поддержка нескольких направлений письма больше не кошмар. Варианты ltr: и rtl: позволяют менять стили в зависимости от направления текста:

<p class="ltr:text-left rtl:text-right">Hello • مرحبا</p>

Как Tailwind держит бандл маленьким

При сборке в продакшен Tailwind автоматически удаляет все неиспользуемые классы. В результате вы часто отправляете в браузер меньше 10 кБ CSS. Типичная структура проекта выглядит так:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS</title>
  <link rel="stylesheet" href="/build.css" />
</head>
<body>
  <button class=""></button>
</body>
</html>

/* build.css — результат сборки */
@layer utilities {
  /* ...минимальный набор реально используемых утилит... */
}

{
  "name": "tailwind-app",
  "private": true,
  "scripts": {
    "build": "tailwindcss -i ./src/app.css -o ./public/build.css --minify"
  }
}

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

Компонент ниже полностью собран утилитами — адаптивный отступ, тени, скругления, типографика:

<div class="flex flex-col items-center p-7 rounded-2xl shadow-xl bg-white/5">
  <div>
    <img class="size-48 shadow-xl rounded-md" alt="" src="/img/cover.png" />
  </div>
  <div class="mt-4 flex items-center gap-3">
    <span class="text-2xl font-medium">Class Warfare</span>
    <span class="font-medium text-sky-500">The Anti-Patterns</span>
    <span class="flex items-center gap-2 text-gray-500">
      <span>No. 4</span><span>·</span><span>2025</span>
    </span>
  </div>
</div>

Готовые блоки, чтобы ускориться ещё сильнее

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

• Templates: визуально выразительные шаблоны на React/Next.js.
• UI Blocks: 500+ профессионально собранных, полностью адаптивных компонентов.
• UI Kit: заготовки для собственной дизайн-системы на React и Tailwind CSS.

Где Tailwind уже применяют

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