🧙 Садовник: уточнил шаги, добавил проверки и обоснования. Примите, если полезно.
#1Proposed changes · v1 → suggestion
+7−3811−¶ # Шпаргалка по Tailwind CSS
2−
3− Tailwind CSS — утилитарный CSS-фреймворк. Вместо того чтобы писать CSS, ты применяешь готовые классы прямо в HTML.
4−
5− Список непоследовательный — это справочник, а не инструкция. Открывай нужный раздел, когда понадобится.
6−¶ ## ⚠ Про версию — прочитай до установки
7−
8− Актуальная версия — **Tailwind CSS v4**. Исходная шпаргалка написана под v3, и раздел установки там устарел. Что изменилось:
9−
10− | | v3 | v4 |
11− |---|---|---|
12− | Подключение в CSS | `@tailwind base;` и ещё две строки | `@import "tailwindcss";` — одна строка |
13− | Конфиг | `tailwind.config.js` | настройки в CSS через тему; JS-конфиг работает, но подключается явно через `@config` |
14− | PostCSS | сам пакет `tailwindcss` | отдельный `@tailwindcss/postcss` |
15− | CLI | входил в основной пакет | отдельный `@tailwindcss/cli` |
16− | Vite | через PostCSS | есть плагин `@tailwindcss/vite` |
17−
18− **Что НЕ менялось:** сами классы-утилиты. Всё ниже про типографику, отступы, Flexbox, Grid и остальное верно для обеих версий. Градиенты вроде `bg-gradient-to-r` тоже не переименовывали.
191## Установка
202• Поставить Tailwind
21− **v4 (актуальная):** команда ниже. Для Vite вместо PostCSS-пакета ставь `@tailwindcss/vite`.
3+ v4 (актуальная): команда ниже. Для Vite вместо PostCSS-пакета ставь @tailwindcss/vite.
224
23− **v3 (устаревшая, попадаётся в старых статьях):**
5+ v3 (устаревшая, попадаётся в старых статьях):
246
257 ```bash
268 npm install -D tailwindcss
279 npx tailwindcss init
2810 ```
2911 $ npm install tailwindcss @tailwindcss/postcss
3012 why: Статьи и шпаргалки в интернете в основном про v3, а ставится сегодня v4. Если не знать про разницу, получишь ошибку на первом шаге и не поймёшь почему.
3113 - [ ] Пакеты установлены без ошибок
3214 - [ ] Ты знаешь, какую версию ставишь
15+ - [ ] Проверь наличие конфигурационного файла tailwind.config.js
3316 → Установка — официальная документация — https://tailwindcss.com/docs/installation
3417 → Переход с v3 на v4 — https://tailwindcss.com/docs/upgrade-guide
3518• Подключить в CSS
36− **v4** — одна строка в главном CSS-файле:
19+ v4 — одна строка в главном CSS-файле:
3720
3821 ```css
3922 @import "tailwindcss";
4023 ```
4124
42− **v3** — три директивы:
25+ v3 — три директивы:
4326
4427 ```css
4528 @tailwind base;
4629 @tailwind components;
4730 @tailwind utilities;
4831 ```
4932
50− Если поставил v4, а написал `@tailwind` — стили просто не применятся.
33+ Если поставил v4, а написал @tailwind — стили просто не применятся.
5134 why: Это самое частое место, где смешивают версии: установка прошла, сборка идёт, а классы не работают — и непонятно, куда смотреть.
5235 - [ ] Стили применяются: проверь любым классом, например text-red-500
36+ - [ ] Убедиться, что в CSS-файле используется соответствующий синтаксис для твоей версии Tailwind
5337 → Директивы и функции — https://tailwindcss.com/docs/functions-and-directives
54−¶ ## Типографика
55−
56− **Размер шрифта**
57− ```html
58− <p class="text-xs">Очень маленький текст</p>
59− <p class="text-sm">Маленький текст</p>
60− <p class="text-base">Базовый размер</p>
61− <p class="text-lg">Большой текст</p>
62− <p class="text-xl">Очень большой</p>
63− <p class="text-2xl">2xl — и так до text-9xl</p>
64− ```
65−
66− **Вес шрифта**
67− ```html
68− <p class="font-thin">Тонкий</p>
69− <p class="font-light">Светлый</p>
70− <p class="font-normal">Обычный</p>
71− <p class="font-medium">Средний</p>
72− <p class="font-bold">Жирный</p>
73− <p class="font-black">Очень жирный</p>
74− ```
75−
76− **Выравнивание и цвет**
77− ```html
78− <p class="text-left">По левому краю</p>
79− <p class="text-center">По центру</p>
80− <p class="text-right">По правому краю</p>
81− <p class="text-justify">По ширине</p>
82−
83− <p class="text-black">Чёрный</p>
84− <p class="text-red-500">Красный (500)</p>
85− <p class="text-blue-700">Синий (700)</p>
86− <!-- Оттенки от 50 до 900 -->
87− ```
88−
89− **Межстрочный интервал**
90− ```html
91− <p class="leading-none">Минимальный</p>
92− <p class="leading-tight">Тесный</p>
93− <p class="leading-normal">Обычный</p>
94− <p class="leading-loose">Свободный</p>
95− ```
96−¶ ## Цвета и фоны
97−
98− ```html
99− <div class="bg-white">Белый фон</div>
100− <div class="bg-black">Чёрный фон</div>
101− <div class="bg-red-500">Красный фон</div>
102− <div class="bg-blue-200">Светло-синий</div>
103− ```
104−
105− **Градиенты**
106− ```html
107− <div class="bg-gradient-to-r from-cyan-500 to-blue-500">Слева направо</div>
108− <div class="bg-gradient-to-t from-purple-500 to-pink-500">Снизу вверх</div>
109− ```
110−
111− **Прозрачность**
112− ```html
113− <div class="bg-black bg-opacity-75">Фон с прозрачностью 75%</div>
114− <div class="text-black text-opacity-50">Полупрозрачный текст</div>
115− ```
116−¶ ## Размеры
117−
118− **Ширина**
119− ```html
120− <div class="w-1/2">50% ширины</div>
121− <div class="w-full">100% ширины</div>
122− <div class="w-screen">Ширина экрана</div>
123− <div class="w-64">16rem (256px)</div>
124− <div class="max-w-md">Максимум 28rem</div>
125− ```
126−
127− **Высота**
128− ```html
129− <div class="h-64">16rem (256px)</div>
130− <div class="h-full">100% высоты контейнера</div>
131− <div class="h-screen">100% высоты экрана</div>
132− <div class="min-h-screen">Минимум во весь экран</div>
133− ```
134−¶ ## Отступы и поля
135−
136− **Внутренние (padding)**
137− ```html
138− <div class="p-4">Со всех сторон (1rem)</div>
139− <div class="px-4">Слева и справа</div>
140− <div class="py-4">Сверху и снизу</div>
141− <div class="pt-4">Сверху</div>
142− <div class="pr-4">Справа</div>
143− <div class="pb-4">Снизу</div>
144− <div class="pl-4">Слева</div>
145− ```
146−
147− **Внешние (margin)** — те же буквы, но с `m`
148− ```html
149− <div class="m-4">Со всех сторон</div>
150− <div class="mx-auto">Центрирование блока</div>
151− <div class="my-4">По вертикали</div>
152− <div class="mt-4">Сверху</div>
153− <div class="-mt-4">Отрицательный сверху</div>
154− ```
155−
156− Запомни шаблон один раз — он повторяется во всём Tailwind: буква свойства, буква стороны, число.
157−¶ ## Flexbox
158−
159− **Контейнер и направление**
160− ```html
161− <div class="flex">Flex-контейнер</div>
162− <div class="inline-flex">Строчный</div>
163− <div class="flex-row">В строку (по умолчанию)</div>
164− <div class="flex-col">В столбец</div>
165− <div class="flex-row-reverse">В строку, обратно</div>
166− <div class="flex-col-reverse">В столбец, обратно</div>
167− ```
168−
169− **Выравнивание** — `justify-*` вдоль основной оси, `items-*` поперёк
170− ```html
171− <div class="justify-start">По началу</div>
172− <div class="justify-center">По центру</div>
173− <div class="justify-end">По концу</div>
174− <div class="justify-between">Равномерно, без отступов по краям</div>
175− <div class="justify-around">Равномерно, половинные по краям</div>
176− <div class="justify-evenly">Равномерно, равные отступы</div>
177−
178− <div class="items-start">По верху</div>
179− <div class="items-center">По центру</div>
180− <div class="items-end">По низу</div>
181− <div class="items-stretch">Растянуть (по умолчанию)</div>
182− ```
183−
184− **Порядок и размер**
185− ```html
186− <div class="flex-1">Гибкий (flex-grow: 1)</div>
187− <div class="flex-auto">Автоматический размер</div>
188− <div class="flex-none">Негибкий</div>
189− <div class="order-1">Порядок 1</div>
190− ```
191−¶ ## Grid
192−
193− ```html
194− <div class="grid">Grid-контейнер</div>
195− <div class="grid-cols-3">Сетка из 3 колонок</div>
196− <div class="grid-cols-12">Сетка из 12 колонок</div>
197− <div class="grid-rows-4">Сетка из 4 строк</div>
198− ```
199−
200− **Размеры ячеек**
201− ```html
202− <div class="col-span-2">Занимает 2 колонки</div>
203− <div class="col-span-full">Все колонки</div>
204− <div class="row-span-3">Занимает 3 строки</div>
205− ```
206−
207− **Отступы между ячейками**
208− ```html
209− <div class="gap-4">1rem между ячейками</div>
210− <div class="gap-x-4">Только по горизонтали</div>
211− <div class="gap-y-4">Только по вертикали</div>
212− ```
213−
214− `gap` работает и во Flexbox — часто это проще, чем отступы у каждого элемента.
215−¶ ## Границы и скругления
216−
217− ```html
218− <div class="border">1px (стандарт)</div>
219− <div class="border-2">2px</div>
220− <div class="border-4">4px</div>
221− <div class="border-8">8px</div>
222−
223− <div class="border-t">Только сверху</div>
224− <div class="border-r">Только справа</div>
225− <div class="border-b">Только снизу</div>
226− <div class="border-l">Только слева</div>
227−
228− <div class="border-red-500">Красная</div>
229− <div class="border-blue-300">Светло-синяя</div>
230− ```
231−
232− **Скругление углов**
233− ```html
234− <div class="rounded">0.25rem</div>
235− <div class="rounded-md">Среднее</div>
236− <div class="rounded-lg">Сильное</div>
237− <div class="rounded-full">Круг или овал</div>
238− <div class="rounded-t-lg">Только верхние</div>
239− <div class="rounded-r-lg">Только правые</div>
240− ```
241−¶ ## Тени
242−
243− ```html
244− <div class="shadow">Стандартная</div>
245− <div class="shadow-md">Средняя</div>
246− <div class="shadow-lg">Большая</div>
247− <div class="shadow-xl">Очень большая</div>
248− <div class="shadow-2xl">Огромная</div>
249− <div class="shadow-inner">Внутренняя</div>
250− <div class="shadow-none">Без тени</div>
251− ```
252−¶ ## Переходы и трансформации
253−
254− ```html
255− <div class="transition">Стандартный переход</div>
256− <div class="transition-colors">Только для цветов</div>
257− <div class="duration-300">300ms</div>
258− <div class="ease-in-out">Плавное ускорение и замедление</div>
259− ```
260−
261− **Трансформации**
262− ```html
263− <div class="scale-75">Масштаб 75%</div>
264− <div class="scale-125">Масштаб 125%</div>
265− <div class="rotate-45">Поворот на 45°</div>
266− <div class="translate-x-4">Смещение по X</div>
267− <div class="translate-y-4">Смещение по Y</div>
268− ```
269−
270− Трансформации почти всегда сочетают с `transition` и состояниями вроде `hover:`.
271−¶ ## Интерактивность
272−
273− **Состояния** — приставка через двоеточие
274− ```html
275− <button class="hover:bg-blue-700">При наведении</button>
276− <button class="focus:outline-none">Убрать обводку при фокусе</button>
277− <button class="active:bg-blue-800">При нажатии</button>
278− <input class="focus:ring-2 focus:ring-blue-500">
279− ```
280−
281− **Курсор**
282− ```html
283− <button class="cursor-pointer">Рука</button>
284− <div class="cursor-not-allowed">Запрещено</div>
285− <div class="cursor-wait">Ожидание</div>
286− ```
287−
288− Осторожно с `focus:outline-none`: убирая обводку, всегда ставь что-то взамен — иначе с клавиатуры непонятно, где ты находишься.
289−¶ ## Адаптивный дизайн
290−
291− Брейкпоинты:
292−
293− | Приставка | От какой ширины |
294− |---|---|
295− | `sm:` | 640px |
296− | `md:` | 768px |
297− | `lg:` | 1024px |
298− | `xl:` | 1280px |
299− | `2xl:` | 1536px |
300−
301− ```html
302− <div class="text-sm md:text-base lg:text-lg">
303− Размер меняется с шириной экрана
304− </div>
305−
306− <div class="flex flex-col md:flex-row">
307− Столбец на телефоне, строка на планшете и выше
308− </div>
309−
310− <div class="hidden md:block">
311− Скрыт на мобильных, виден на md и выше
312− </div>
313− ```
314−
315− **Главное правило:** класс без приставки — это стиль для самого маленького экрана, а приставки добавляются **от меньшего к большему**. Писать наоборот — самая частая ошибка новичка.
316−¶ ## Позиционирование, z-index и переполнение
317−
318− ```html
319− <div class="static">Статичное (по умолчанию)</div>
320− <div class="relative">Относительное</div>
321− <div class="absolute">Абсолютное</div>
322− <div class="fixed">Фиксированное</div>
323− <div class="sticky">Липкое</div>
324−
325− <div class="top-0">К верху</div>
326− <div class="right-0">К правому краю</div>
327− <div class="bottom-0">К низу</div>
328− <div class="left-0">К левому краю</div>
329− <div class="inset-0">Ко всем краям</div>
330− ```
331−
332− **z-index**
333− ```html
334− <div class="z-0">z-index: 0</div>
335− <div class="z-10">z-index: 10</div>
336− <div class="z-50">z-index: 50</div>
337− <div class="z-auto">z-index: auto</div>
338− ```
339−
340− **Переполнение**
341− ```html
342− <div class="overflow-auto">Прокрутка при необходимости</div>
343− <div class="overflow-hidden">Скрыть лишнее</div>
344− <div class="overflow-scroll">Всегда показывать полосы</div>
345− <div class="overflow-x-auto">Только горизонтальная</div>
346− <div class="overflow-y-auto">Только вертикальная</div>
347− ```
348−
349− `absolute` отсчитывается от ближайшего родителя с `relative` — его забывают поставить чаще всего.
350−¶ ## Группировка и кастомизация
351−
352− **Группировка** — реакция дочернего элемента на наведение на родителя
353− ```html
354− <div class="group">
355− Родительский элемент
356− <div class="hidden group-hover:block">
357− Появляется при наведении на родителя
358− </div>
359− </div>
360− ```
361−
362− **Свой класс через @apply**
363− ```css
364− .btn {
365− @apply py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
366− }
367− ```
368−
369− С `@apply` легко перестараться: если вынести в такие классы всё, получится обычный CSS — и смысл утилитарного подхода пропадёт. Используй там, где один и тот же набор повторяется десятки раз.
370−¶ ## Тёмная тема
371−
372− ```html
373− <div class="bg-white dark:bg-gray-800 text-black dark:text-white">
374− Элемент меняет цвета в зависимости от темы
375− </div>
376− ```
377−
378− Принцип тот же, что у адаптивности: обычный класс — светлая тема, приставка `dark:` — тёмная.
379−¶ ## Плагины и JIT
380−
381− **Плагины:**
382− - `@tailwindcss/forms` — стили для форм
383− - `@tailwindcss/typography` — стили для текстовых блоков
384− - `@tailwindcss/aspect-ratio` — соотношение сторон
385−
386− В исходной шпаргалке упоминался ещё `@tailwindcss/line-clamp` — отдельно его ставить больше не нужно, `line-clamp` входит в ядро.
387−
388− **JIT-компилятор** включён по умолчанию начиная с v3. Он генерирует классы по мере надобности и позволяет произвольные значения в квадратных скобках:
389−
390− ```html
391− <div class="text-[17px] mt-[43px] bg-[#1da1f2]">
392− Произвольные значения, когда стандартных не хватает
393− </div>
394− ```
395−¶
396−¶
397−¶
398−¶ ## Источники
399−
400− Шпаргалка собрана из личных заметок и сверена с официальной документацией на момент версии 4.
401−
402− Полезные разделы документации:
403−
404− - [Установка](https://tailwindcss.com/docs/installation)
405− - [Переход с v3 на v4](https://tailwindcss.com/docs/upgrade-guide)
406− - [Адаптивный дизайн](https://tailwindcss.com/docs/responsive-design)
407− - [Тёмная тема](https://tailwindcss.com/docs/dark-mode)
408− - [Цвета](https://tailwindcss.com/docs/colors)
409− - [Flexbox](https://tailwindcss.com/docs/flex)
410− - [Grid](https://tailwindcss.com/docs/grid-template-columns)
411− - [Директивы и функции (@apply и прочее)](https://tailwindcss.com/docs/functions-and-directives)
Review