List Issues Suggestions1 Discussions Insights

Шпаргалка по Tailwind CSS

Справочник по утилитарным классам Tailwind: типографика, цвета, отступы, Flexbox, Grid, адаптивность, тёмная тема. С поправкой на изменения в версии 4.

tailwind css frontend cheatsheet

v1 0 stars 0 forks 0 watchers 1 branch 0 runs Public

mikey-semycreated via APIv12 weeks ago1

Шпаргалка по 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 тоже не переименовывали.

Установка

•

Поставить Tailwind

v4 (актуальная): команда ниже. Для Vite вместо PostCSS-пакета ставь @tailwindcss/vite.

v3 (устаревшая, попадаётся в старых статьях):

bash

1npm install -D tailwindcss

2npx tailwindcss init

Why: Статьи и шпаргалки в интернете в основном про v3, а ставится сегодня v4. Если не знать про разницу, получишь ошибку на первом шаге и не поймёшь почему.

$npm install tailwindcss @tailwindcss/postcss

Check

Пакеты установлены без ошибок
Ты знаешь, какую версию ставишь

Установка — официальная документация Переход с v3 на v4

•

Подключить в CSS

v4 — одна строка в главном CSS-файле:

css

1@import "tailwindcss";

v3 — три директивы:

css

1@tailwind base;

2@tailwind components;

3@tailwind utilities;

Если поставил v4, а написал @tailwind — стили просто не применятся.

Why: Это самое частое место, где смешивают версии: установка прошла, сборка идёт, а классы не работают — и непонятно, куда смотреть.

Check

Стили применяются: проверь любым классом, например text-red-500

Директивы и функции

Типографика

Размер шрифта

html

1<p class="text-xs">Очень маленький текст</p>

2<p class="text-sm">Маленький текст</p>

3<p class="text-base">Базовый размер</p>

4<p class="text-lg">Большой текст</p>

5<p class="text-xl">Очень большой</p>

6<p class="text-2xl">2xl — и так до text-9xl</p>

Вес шрифта

html

1<p class="font-thin">Тонкий</p>

2<p class="font-light">Светлый</p>

3<p class="font-normal">Обычный</p>

4<p class="font-medium">Средний</p>

5<p class="font-bold">Жирный</p>

6<p class="font-black">Очень жирный</p>

Выравнивание и цвет

html

1<p class="text-left">По левому краю</p>

2<p class="text-center">По центру</p>

3<p class="text-right">По правому краю</p>

4<p class="text-justify">По ширине</p>

6<p class="text-black">Чёрный</p>

7<p class="text-red-500">Красный (500)</p>

8<p class="text-blue-700">Синий (700)</p>

9

Межстрочный интервал

html

1<p class="leading-none">Минимальный</p>

2<p class="leading-tight">Тесный</p>

3<p class="leading-normal">Обычный</p>

4<p class="leading-loose">Свободный</p>

Цвета и фоны

html

1<div class="bg-white">Белый фон</div>

2<div class="bg-black">Чёрный фон</div>

3<div class="bg-red-500">Красный фон</div>

4<div class="bg-blue-200">Светло-синий</div>

Градиенты

html

1<div class="bg-gradient-to-r from-cyan-500 to-blue-500">Слева направо</div>

2<div class="bg-gradient-to-t from-purple-500 to-pink-500">Снизу вверх</div>

Прозрачность

html

1<div class="bg-black bg-opacity-75">Фон с прозрачностью 75%</div>

2<div class="text-black text-opacity-50">Полупрозрачный текст</div>

Размеры

Ширина

html

1<div class="w-1/2">50% ширины</div>

2<div class="w-full">100% ширины</div>

3<div class="w-screen">Ширина экрана</div>

4<div class="w-64">16rem (256px)</div>

5<div class="max-w-md">Максимум 28rem</div>

Высота

html

1<div class="h-64">16rem (256px)</div>

2<div class="h-full">100% высоты контейнера</div>

3<div class="h-screen">100% высоты экрана</div>

4<div class="min-h-screen">Минимум во весь экран</div>

Отступы и поля

Внутренние (padding)

html

1<div class="p-4">Со всех сторон (1rem)</div>

2<div class="px-4">Слева и справа</div>

3<div class="py-4">Сверху и снизу</div>

4<div class="pt-4">Сверху</div>

5<div class="pr-4">Справа</div>

6<div class="pb-4">Снизу</div>

7<div class="pl-4">Слева</div>

Внешние (margin) — те же буквы, но с m

html

1<div class="m-4">Со всех сторон</div>

2<div class="mx-auto">Центрирование блока</div>

3<div class="my-4">По вертикали</div>

4<div class="mt-4">Сверху</div>

5<div class="-mt-4">Отрицательный сверху</div>

Запомни шаблон один раз — он повторяется во всём Tailwind: буква свойства, буква стороны, число.

Flexbox

Контейнер и направление

html

1<div class="flex">Flex-контейнер</div>

2<div class="inline-flex">Строчный</div>

3<div class="flex-row">В строку (по умолчанию)</div>

4<div class="flex-col">В столбец</div>

5<div class="flex-row-reverse">В строку, обратно</div>

6<div class="flex-col-reverse">В столбец, обратно</div>

Выравнивание — justify-* вдоль основной оси, items-* поперёк

html

1<div class="justify-start">По началу</div>

2<div class="justify-center">По центру</div>

3<div class="justify-end">По концу</div>

4<div class="justify-between">Равномерно, без отступов по краям</div>

5<div class="justify-around">Равномерно, половинные по краям</div>

6<div class="justify-evenly">Равномерно, равные отступы</div>

8<div class="items-start">По верху</div>

9<div class="items-center">По центру</div>

10<div class="items-end">По низу</div>

11<div class="items-stretch">Растянуть (по умолчанию)</div>

Порядок и размер

html

1<div class="flex-1">Гибкий (flex-grow: 1)</div>

2<div class="flex-auto">Автоматический размер</div>

3<div class="flex-none">Негибкий</div>

4<div class="order-1">Порядок 1</div>

Grid

html

1<div class="grid">Grid-контейнер</div>

2<div class="grid-cols-3">Сетка из 3 колонок</div>

3<div class="grid-cols-12">Сетка из 12 колонок</div>

4<div class="grid-rows-4">Сетка из 4 строк</div>

Размеры ячеек

html

1<div class="col-span-2">Занимает 2 колонки</div>

2<div class="col-span-full">Все колонки</div>

3<div class="row-span-3">Занимает 3 строки</div>

Отступы между ячейками

html

1<div class="gap-4">1rem между ячейками</div>

2<div class="gap-x-4">Только по горизонтали</div>

3<div class="gap-y-4">Только по вертикали</div>

gap работает и во Flexbox — часто это проще, чем отступы у каждого элемента.

Границы и скругления

html

1<div class="border">1px (стандарт)</div>

2<div class="border-2">2px</div>

3<div class="border-4">4px</div>

4<div class="border-8">8px</div>

6<div class="border-t">Только сверху</div>

7<div class="border-r">Только справа</div>

8<div class="border-b">Только снизу</div>

9<div class="border-l">Только слева</div>

11<div class="border-red-500">Красная</div>

12<div class="border-blue-300">Светло-синяя</div>

Скругление углов

html

1<div class="rounded">0.25rem</div>

2<div class="rounded-md">Среднее</div>

3<div class="rounded-lg">Сильное</div>

4<div class="rounded-full">Круг или овал</div>

5<div class="rounded-t-lg">Только верхние</div>

6<div class="rounded-r-lg">Только правые</div>

Тени

html

1<div class="shadow">Стандартная</div>

2<div class="shadow-md">Средняя</div>

3<div class="shadow-lg">Большая</div>

4<div class="shadow-xl">Очень большая</div>

5<div class="shadow-2xl">Огромная</div>

6<div class="shadow-inner">Внутренняя</div>

7<div class="shadow-none">Без тени</div>

Переходы и трансформации

html

1<div class="transition">Стандартный переход</div>

2<div class="transition-colors">Только для цветов</div>

3<div class="duration-300">300ms</div>

4<div class="ease-in-out">Плавное ускорение и замедление</div>

Трансформации

html

1<div class="scale-75">Масштаб 75%</div>

2<div class="scale-125">Масштаб 125%</div>

3<div class="rotate-45">Поворот на 45°</div>

4<div class="translate-x-4">Смещение по X</div>

5<div class="translate-y-4">Смещение по Y</div>

Трансформации почти всегда сочетают с transition и состояниями вроде hover:.

Интерактивность

Состояния — приставка через двоеточие

html

1<button class="hover:bg-blue-700">При наведении</button>

2<button class="focus:outline-none">Убрать обводку при фокусе</button>

3<button class="active:bg-blue-800">При нажатии</button>

4<input class="focus:ring-2 focus:ring-blue-500">

Курсор

html

1<button class="cursor-pointer">Рука</button>

2<div class="cursor-not-allowed">Запрещено</div>

3<div class="cursor-wait">Ожидание</div>

Осторожно с focus:outline-none: убирая обводку, всегда ставь что-то взамен — иначе с клавиатуры непонятно, где ты находишься.

Адаптивный дизайн

Брейкпоинты:

Приставка	От какой ширины
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

html

1<div class="text-sm md:text-base lg:text-lg">

2 Размер меняется с шириной экрана

3</div>

5<div class="flex flex-col md:flex-row">

6 Столбец на телефоне, строка на планшете и выше

7</div>

9<div class="hidden md:block">

10 Скрыт на мобильных, виден на md и выше

11</div>

Главное правило: класс без приставки — это стиль для самого маленького экрана, а приставки добавляются от меньшего к большему. Писать наоборот — самая частая ошибка новичка.

Позиционирование, z-index и переполнение

html

1<div class="static">Статичное (по умолчанию)</div>

2<div class="relative">Относительное</div>

3<div class="absolute">Абсолютное</div>

4<div class="fixed">Фиксированное</div>

5<div class="sticky">Липкое</div>

7<div class="top-0">К верху</div>

8<div class="right-0">К правому краю</div>

9<div class="bottom-0">К низу</div>

10<div class="left-0">К левому краю</div>

11<div class="inset-0">Ко всем краям</div>

z-index

html

1<div class="z-0">z-index: 0</div>

2<div class="z-10">z-index: 10</div>

3<div class="z-50">z-index: 50</div>

4<div class="z-auto">z-index: auto</div>

Переполнение

html

1<div class="overflow-auto">Прокрутка при необходимости</div>

2<div class="overflow-hidden">Скрыть лишнее</div>

3<div class="overflow-scroll">Всегда показывать полосы</div>

4<div class="overflow-x-auto">Только горизонтальная</div>

5<div class="overflow-y-auto">Только вертикальная</div>

absolute отсчитывается от ближайшего родителя с relative — его забывают поставить чаще всего.

Группировка и кастомизация

Группировка — реакция дочернего элемента на наведение на родителя

html

1<div class="group">

2 Родительский элемент

3 <div class="hidden group-hover:block">

4 Появляется при наведении на родителя

5 </div>

6</div>

Свой класс через @apply

css

1.btn {

2 @apply py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700;

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

Тёмная тема

html

1<div class="bg-white dark:bg-gray-800 text-black dark:text-white">

2 Элемент меняет цвета в зависимости от темы

3</div>

Принцип тот же, что у адаптивности: обычный класс — светлая тема, приставка dark: — тёмная.

Плагины и JIT

Плагины:

@tailwindcss/forms — стили для форм
@tailwindcss/typography — стили для текстовых блоков
@tailwindcss/aspect-ratio — соотношение сторон

В исходной шпаргалке упоминался ещё @tailwindcss/line-clamp — отдельно его ставить больше не нужно, line-clamp входит в ядро.

JIT-компилятор включён по умолчанию начиная с v3. Он генерирует классы по мере надобности и позволяет произвольные значения в квадратных скобках:

html

1<div class="text-[17px] mt-[43px] bg-[#1da1f2]">

2 Произвольные значения, когда стандартных не хватает

3</div>

Ты поставил Tailwind v4 и написал в CSS три строки @tailwind base/components/utilities. Что произойдёт?

Как написать: на телефоне столбец, на планшете и шире — строка?

Элемент с absolute уехал не туда, куда ожидалось. Что проверить первым делом?

Источники

Шпаргалка собрана из личных заметок и сверена с официальной документацией на момент версии 4.

Полезные разделы документации: