🧙 Садовник: уточнил шаги, добавил проверки и обоснования. Примите, если полезно.

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

## ⚠ Про версию — прочитай до установки Актуальная версия — **Tailwind CSS v4**. Исходная шпаргалка написана под v3, и раздел установки там устарел. Что изменилось: | | v3 | v4 | |---|---|---| | Подключение в CSS | `@tailwind base;` и ещё две строки | `@import "tailwindcss";` — одна строка | | Конфиг | `tailwind.config.js` | настройки в CSS через тему; JS-конфиг работает, но подключается явно через `@config` | | PostCSS | сам пакет `tailwindcss` | отдельный `@tailwindcss/postcss` | | CLI | входил в основной пакет | отдельный `@tailwindcss/cli` | | Vite | через PostCSS | есть плагин `@tailwindcss/vite` | **Что НЕ менялось:** сами классы-утилиты. Всё ниже про типографику, отступы, Flexbox, Grid и остальное верно для обеих версий. Градиенты вроде `bg-gradient-to-r` тоже не переименовывали.

## Типографика **Размер шрифта** ```html <p class="text-xs">Очень маленький текст</p> <p class="text-sm">Маленький текст</p> <p class="text-base">Базовый размер</p> <p class="text-lg">Большой текст</p> <p class="text-xl">Очень большой</p> <p class="text-2xl">2xl — и так до text-9xl</p> ``` **Вес шрифта** ```html <p class="font-thin">Тонкий</p> <p class="font-light">Светлый</p> <p class="font-normal">Обычный</p> <p class="font-medium">Средний</p> <p class="font-bold">Жирный</p> <p class="font-black">Очень жирный</p> ``` **Выравнивание и цвет** ```html <p class="text-left">По левому краю</p> <p class="text-center">По центру</p> <p class="text-right">По правому краю</p> <p class="text-justify">По ширине</p> <p class="text-black">Чёрный</p> <p class="text-red-500">Красный (500)</p> <p class="text-blue-700">Синий (700)</p> <!-- Оттенки от 50 до 900 --> ``` **Межстрочный интервал** ```html <p class="leading-none">Минимальный</p> <p class="leading-tight">Тесный</p> <p class="leading-normal">Обычный</p> <p class="leading-loose">Свободный</p> ```

## Цвета и фоны ```html <div class="bg-white">Белый фон</div> <div class="bg-black">Чёрный фон</div> <div class="bg-red-500">Красный фон</div> <div class="bg-blue-200">Светло-синий</div> ``` **Градиенты** ```html <div class="bg-gradient-to-r from-cyan-500 to-blue-500">Слева направо</div> <div class="bg-gradient-to-t from-purple-500 to-pink-500">Снизу вверх</div> ``` **Прозрачность** ```html <div class="bg-black bg-opacity-75">Фон с прозрачностью 75%</div> <div class="text-black text-opacity-50">Полупрозрачный текст</div> ```

## Размеры **Ширина** ```html <div class="w-1/2">50% ширины</div> <div class="w-full">100% ширины</div> <div class="w-screen">Ширина экрана</div> <div class="w-64">16rem (256px)</div> <div class="max-w-md">Максимум 28rem</div> ``` **Высота** ```html <div class="h-64">16rem (256px)</div> <div class="h-full">100% высоты контейнера</div> <div class="h-screen">100% высоты экрана</div> <div class="min-h-screen">Минимум во весь экран</div> ```

## Отступы и поля **Внутренние (padding)** ```html <div class="p-4">Со всех сторон (1rem)</div> <div class="px-4">Слева и справа</div> <div class="py-4">Сверху и снизу</div> <div class="pt-4">Сверху</div> <div class="pr-4">Справа</div> <div class="pb-4">Снизу</div> <div class="pl-4">Слева</div> ``` **Внешние (margin)** — те же буквы, но с `m` ```html <div class="m-4">Со всех сторон</div> <div class="mx-auto">Центрирование блока</div> <div class="my-4">По вертикали</div> <div class="mt-4">Сверху</div> <div class="-mt-4">Отрицательный сверху</div> ``` Запомни шаблон один раз — он повторяется во всём Tailwind: буква свойства, буква стороны, число.

## Flexbox **Контейнер и направление** ```html <div class="flex">Flex-контейнер</div> <div class="inline-flex">Строчный</div> <div class="flex-row">В строку (по умолчанию)</div> <div class="flex-col">В столбец</div> <div class="flex-row-reverse">В строку, обратно</div> <div class="flex-col-reverse">В столбец, обратно</div> ``` **Выравнивание** — `justify-*` вдоль основной оси, `items-*` поперёк ```html <div class="justify-start">По началу</div> <div class="justify-center">По центру</div> <div class="justify-end">По концу</div> <div class="justify-between">Равномерно, без отступов по краям</div> <div class="justify-around">Равномерно, половинные по краям</div> <div class="justify-evenly">Равномерно, равные отступы</div> <div class="items-start">По верху</div> <div class="items-center">По центру</div> <div class="items-end">По низу</div> <div class="items-stretch">Растянуть (по умолчанию)</div> ``` **Порядок и размер** ```html <div class="flex-1">Гибкий (flex-grow: 1)</div> <div class="flex-auto">Автоматический размер</div> <div class="flex-none">Негибкий</div> <div class="order-1">Порядок 1</div> ```

## Grid ```html <div class="grid">Grid-контейнер</div> <div class="grid-cols-3">Сетка из 3 колонок</div> <div class="grid-cols-12">Сетка из 12 колонок</div> <div class="grid-rows-4">Сетка из 4 строк</div> ``` **Размеры ячеек** ```html <div class="col-span-2">Занимает 2 колонки</div> <div class="col-span-full">Все колонки</div> <div class="row-span-3">Занимает 3 строки</div> ``` **Отступы между ячейками** ```html <div class="gap-4">1rem между ячейками</div> <div class="gap-x-4">Только по горизонтали</div> <div class="gap-y-4">Только по вертикали</div> ``` `gap` работает и во Flexbox — часто это проще, чем отступы у каждого элемента.

## Границы и скругления ```html <div class="border">1px (стандарт)</div> <div class="border-2">2px</div> <div class="border-4">4px</div> <div class="border-8">8px</div> <div class="border-t">Только сверху</div> <div class="border-r">Только справа</div> <div class="border-b">Только снизу</div> <div class="border-l">Только слева</div> <div class="border-red-500">Красная</div> <div class="border-blue-300">Светло-синяя</div> ``` **Скругление углов** ```html <div class="rounded">0.25rem</div> <div class="rounded-md">Среднее</div> <div class="rounded-lg">Сильное</div> <div class="rounded-full">Круг или овал</div> <div class="rounded-t-lg">Только верхние</div> <div class="rounded-r-lg">Только правые</div> ```

## Тени ```html <div class="shadow">Стандартная</div> <div class="shadow-md">Средняя</div> <div class="shadow-lg">Большая</div> <div class="shadow-xl">Очень большая</div> <div class="shadow-2xl">Огромная</div> <div class="shadow-inner">Внутренняя</div> <div class="shadow-none">Без тени</div> ```

## Переходы и трансформации ```html <div class="transition">Стандартный переход</div> <div class="transition-colors">Только для цветов</div> <div class="duration-300">300ms</div> <div class="ease-in-out">Плавное ускорение и замедление</div> ``` **Трансформации** ```html <div class="scale-75">Масштаб 75%</div> <div class="scale-125">Масштаб 125%</div> <div class="rotate-45">Поворот на 45°</div> <div class="translate-x-4">Смещение по X</div> <div class="translate-y-4">Смещение по Y</div> ``` Трансформации почти всегда сочетают с `transition` и состояниями вроде `hover:`.

## Интерактивность **Состояния** — приставка через двоеточие ```html <button class="hover:bg-blue-700">При наведении</button> <button class="focus:outline-none">Убрать обводку при фокусе</button> <button class="active:bg-blue-800">При нажатии</button> <input class="focus:ring-2 focus:ring-blue-500"> ``` **Курсор** ```html <button class="cursor-pointer">Рука</button> <div class="cursor-not-allowed">Запрещено</div> <div class="cursor-wait">Ожидание</div> ``` Осторожно с `focus:outline-none`: убирая обводку, всегда ставь что-то взамен — иначе с клавиатуры непонятно, где ты находишься.

## Адаптивный дизайн Брейкпоинты: | Приставка | От какой ширины | |---|---| | `sm:` | 640px | | `md:` | 768px | | `lg:` | 1024px | | `xl:` | 1280px | | `2xl:` | 1536px | ```html <div class="text-sm md:text-base lg:text-lg"> Размер меняется с шириной экрана </div> <div class="flex flex-col md:flex-row"> Столбец на телефоне, строка на планшете и выше </div> <div class="hidden md:block"> Скрыт на мобильных, виден на md и выше </div> ``` **Главное правило:** класс без приставки — это стиль для самого маленького экрана, а приставки добавляются **от меньшего к большему**. Писать наоборот — самая частая ошибка новичка.

## Позиционирование, z-index и переполнение ```html <div class="static">Статичное (по умолчанию)</div> <div class="relative">Относительное</div> <div class="absolute">Абсолютное</div> <div class="fixed">Фиксированное</div> <div class="sticky">Липкое</div> <div class="top-0">К верху</div> <div class="right-0">К правому краю</div> <div class="bottom-0">К низу</div> <div class="left-0">К левому краю</div> <div class="inset-0">Ко всем краям</div> ``` **z-index** ```html <div class="z-0">z-index: 0</div> <div class="z-10">z-index: 10</div> <div class="z-50">z-index: 50</div> <div class="z-auto">z-index: auto</div> ``` **Переполнение** ```html <div class="overflow-auto">Прокрутка при необходимости</div> <div class="overflow-hidden">Скрыть лишнее</div> <div class="overflow-scroll">Всегда показывать полосы</div> <div class="overflow-x-auto">Только горизонтальная</div> <div class="overflow-y-auto">Только вертикальная</div> ``` `absolute` отсчитывается от ближайшего родителя с `relative` — его забывают поставить чаще всего.

## Группировка и кастомизация **Группировка** — реакция дочернего элемента на наведение на родителя ```html <div class="group"> Родительский элемент <div class="hidden group-hover:block"> Появляется при наведении на родителя </div> </div> ``` **Свой класс через @apply** ```css .btn { @apply py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700; } ``` С `@apply` легко перестараться: если вынести в такие классы всё, получится обычный CSS — и смысл утилитарного подхода пропадёт. Используй там, где один и тот же набор повторяется десятки раз.

## Тёмная тема ```html <div class="bg-white dark:bg-gray-800 text-black dark:text-white"> Элемент меняет цвета в зависимости от темы </div> ``` Принцип тот же, что у адаптивности: обычный класс — светлая тема, приставка `dark:` — тёмная.

## Плагины и JIT **Плагины:** - `@tailwindcss/forms` — стили для форм - `@tailwindcss/typography` — стили для текстовых блоков - `@tailwindcss/aspect-ratio` — соотношение сторон В исходной шпаргалке упоминался ещё `@tailwindcss/line-clamp` — отдельно его ставить больше не нужно, `line-clamp` входит в ядро. **JIT-компилятор** включён по умолчанию начиная с v3. Он генерирует классы по мере надобности и позволяет произвольные значения в квадратных скобках: ```html <div class="text-[17px] mt-[43px] bg-[#1da1f2]"> Произвольные значения, когда стандартных не хватает </div> ```

## Источники Шпаргалка собрана из личных заметок и сверена с официальной документацией на момент версии 4. Полезные разделы документации: - [Установка](https://tailwindcss.com/docs/installation) - [Переход с v3 на v4](https://tailwindcss.com/docs/upgrade-guide) - [Адаптивный дизайн](https://tailwindcss.com/docs/responsive-design) - [Тёмная тема](https://tailwindcss.com/docs/dark-mode) - [Цвета](https://tailwindcss.com/docs/colors) - [Flexbox](https://tailwindcss.com/docs/flex) - [Grid](https://tailwindcss.com/docs/grid-template-columns) - [Директивы и функции (@apply и прочее)](https://tailwindcss.com/docs/functions-and-directives)