Как устроены имена классов
Имена классов Tailwind не нужно заучивать по одному: почти все они строятся по одной схеме. Поняв её, вы угадаете большинство классов, а остальные быстро найдёте в документации.
Свойство и значение
Обычно имя состоит из сокращённого свойства и значения через дефис:
| Класс | CSS |
|---|---|
text-center | text-align: center |
font-bold | font-weight: 700 |
bg-white | background-color: white |
w-full | width: 100% |
hidden | display: none |
flex | display: flex |
Часть классов — одно слово, если значение очевидно: flex, hidden, italic, underline.
Шкала отступов
Числа в p-4, m-2, gap-6, w-64 — это не пиксели, а шаги шкалы. Один шаг равен 0.25rem, то есть 4 пикселя при стандартном размере шрифта:
| Класс | Значение |
|---|---|
p-1 | 0.25rem (4px) |
p-2 | 0.5rem (8px) |
p-4 | 1rem (16px) |
p-8 | 2rem (32px) |
Посмотрите на разницу:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="bg-indigo-100 p-2">p-2</div>
<div class="mt-2 bg-indigo-100 p-4">p-4</div>
<div class="mt-2 bg-indigo-100 p-8">p-8</div>Три полосы с отступами 8, 16 и 32 пикселя. Одна и та же шкала работает для отступов, промежутков, ширины и высоты, поэтому элементы на странице хорошо стыкуются. В Tailwind 4 подходит любое целое число: p-7 или mt-13 тоже работают.
Стороны и оси
Буква после свойства уточняет сторону:
| Часть | Сторона |
|---|---|
t, r, b, l | Верх, право, низ, лево |
x | Лево и право |
y | Верх и низ |
Так pt-4 — отступ сверху, px-6 — слева и справа, my-2 — внешний отступ сверху и снизу.
Отрицательные значения
Минус перед классом делает значение отрицательным: -mt-4 даёт margin-top: -1rem. Так немного сдвигают элемент, например наползающую на картинку плашку.
Модификаторы
Префикс через двоеточие называется вариантом: он включает класс только при условии. hover:bg-indigo-500 меняет фон при наведении, md:flex включает flexbox на широких экранах. Варианты разобраны в отдельных уроках, а пока запомните форму условие:класс.
Частая ошибка
Писать классы «по-человечески», как в CSS:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<p class="text-bold padding-4">Наушники</p>
<p class="font-bold p-4">Наушники</p>Первый абзац не изменился: text-bold и padding-4 не существуют. Жирность — это font-bold, отступ — p-4. Если класс не сработал, проверьте имя в документации или в подсказках редактора — для VS Code есть официальное расширение Tailwind CSS IntelliSense.