| Класс | Описание |
|---|
.align-baseline | Выравнивание по базовой линии текста |
.align-top | Выравнивание по верху родителя |
.align-middle | Выравнивание по середине родителя |
.align-bottom | Выравнивание по низу родителя |
| Класс | Описание |
|---|
.blink | Мигание (opacity 50%, 1s) |
.animation:spin-1 … .animation:spin-10 | Вращение (0.25с — 2.5с) |
.hover:underline--{color} | Подчёркивание при наведении |
.active:pulse | Пульсация при нажатии |
| Класс | Описание |
|---|
.bg-{color} | Цвет фона |
.bg-{color}-{brightness} | Цвет фона с яркостью |
.bg-none | Прозрачный фон |
.bg-opacity-{0|25|50|75|100} | Прозрачность фона |
.hover:bg-{color} | Фон при наведении |
| Класс | Описание |
|---|
.border | Граница 1px |
.border-0 … .border-5 | Граница 0-20px |
.border-t, .border-r, .border-b, .border-l | Граница по стороне |
.border-{color} | Цвет границы |
.border-transparent | Прозрачная граница |
.border-dashed | Пунктирная граница |
.rounded-none | Без скругления |
.rounded-sm | Скругление 2px |
.rounded | Скругление 4px |
.rounded-md | Скругление 6px |
.rounded-lg | Скругление 8px |
.rounded-xl | Скругление 12px |
.rounded-full | Полное скругление |
Важно: Используйте .rounded для базового скругления или .rounded для 4px.
| Класс | Описание |
|---|
.cursor-pointer | Курсор-рука |
.cursor-move | Курсор перемещения |
.cursor-default | Стандартный курсор |
.cursor-disabled | Курсор отключённого элемента |
.cursor-resize-x, .cursor-resize-y | Изменение размера |
.cursor-wait | Ожидание |
.cursor-help | Справка |
| Класс | Описание |
|---|
.inline | Строчный элемент |
.block | Блочный элемент |
.inline-block | Строчно-блочный |
.table, .table-cell | Таблица/ячейка |
.overflow-hidden | Скрыть переполнение |
.overflow-{scroll|auto} | Прокрутка |
| Класс | Описание |
|---|
.opacity-{0|5|10|...|100} | Прозрачность элемента |
.hover:opacity-{value} | Прозрачность при наведении |
.required | Красная звёздочка * |
.rotate-{0|45|90|...|315} | Поворот на угол |
| Класс | Описание |
|---|
.flex | Flex-контейнер |
.flex-col, .flex-col | Вертикальное направление |
.flex-row | Горизонтальное направление |
.flex-wrap | Перенос элементов |
.flex-0, .flex-1, .flex-auto, .flex-none | Flex-свойства |
.items-start … .items-stretch | Выравнивание элементов |
.justify-start … .justify-evenly | Выравнивание по оси |
.gap-{size} | Отступ между элементами |
| Класс | Описание |
|---|
.grid | Grid-контейнер |
.grid-columns--1fr-1fr | Две равные колонки |
.grid-columns--1fr-2fr | Колонки 1fr и 2fr |
.grid-col-span-1 … .grid-col-span-3 | Объединение колонок |
| Класс | Описание |
|---|
.relative | Относительное |
.absolute | Абсолютное |
.fixed | Фиксированное |
.absolute-center | Центрирование |
.top-{pos} … .left-{pos} | Координаты |
.z-0 … .z-100 | Z-index |
| Класс | Описание |
|---|
.w-{size} | Ширина |
.h-{size} | Высота |
.w-screen, .h-screen | 100vw / 100vh |
.min-w-{size}, .max-w-{size} | Минимум/максимум ширины |
| Класс | Описание |
|---|
.m-{space} | Margin со всех сторон |
.mx-{space}, .my-{space} | Margin по осям |
.mt-{space} … .ml-{space} | Margin по сторонам |
.p-{space} | Padding со всех сторон |
.px-{space}, .py-{space} | Padding по осям |
.pt-{space} … .pl-{space} | Padding по сторонам |
Значения: 0, px, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 18, 64
| Класс | Описание |
|---|
.text-2xs … .text-2xl | Размер текста |
.font-thin … .font-black | Вес шрифта |
.text-{color} | Цвет текста |
.text-left, .text-center, .text-right | Выравнивание |
.italic | Курсив |
.underline | Подчёркивание |
.truncate | Обрезка с многоточием |