Имя утилиты
Имя утилиты подчиняется одной грамматике. Зная её, вы читаете любой класс без справочника и понимаете, какое свойство он меняет и при каком условии.
Общая схема
Имя утилиты собирается из частей. Обязательны только свойство и значение; остальные части добавляются, когда нужны.
[-][условие:][ограничение-]свойство[-параметр]-значение
| Часть | Пример | Что означает |
|---|---|---|
| Знак минус | -m-2 |
Отрицательное значение |
| Условие | md:, hover:, cq-md: |
Когда действует правило (см. Условия действия) |
| Ограничение | min-, max- |
Нижняя или верхняя граница свойства |
| Свойство | p, w, bg, gap |
Какое свойство меняется |
| Параметр | x, top, inline-start |
Ось, сторона или угол |
| Значение | 2, 1/2, c4, primary |
Какое значение применяется (см. Значения) |
Примеры разбора:
| Класс | Разбор |
|---|---|
p-2 |
внутренний отступ со всех сторон, ступень 2 шкалы отступов |
md:p-x-4 |
от md — внутренний отступ по строчной оси, ступень 4 |
max-w-screen |
максимальная ширина — ширина окна |
radius-top-inline-end-2 |
скругление верхнего угла на стороне конца строки, ступень 2 |
hover:bg-primary |
при наведении — фон цвета primary |
-lg:m-2 |
от lg — отрицательный внешний отступ ступени 2 |
Свойство: полное имя или сокращение
По умолчанию в имени утилиты стоит имя CSS-свойства или его понятная часть:
overflow-y-auto, opacity-5, rotate-45, order-first. Для самых частых
свойств используются короткие обозначения:
| Обозначение | Свойство | Пример |
|---|---|---|
m, p |
margin, padding |
m-auto, p-2 |
w, h |
width, height |
w-full, h-screen |
bg |
фон | bg-primary, bg-cover |
color |
цвет текста | color-on-surface |
z |
z-index |
z-8, z--1 |
col, row |
размещение в сетке и промежутки | col-span-2, row-gap-1 |
items, self, content |
выравнивание в Flex и Grid | items-cross-center |
Если значение однозначно определяет свойство, имя свойства не пишется вовсе.
Так устроены классы отображения (block, flex, grid, hidden),
позиционирования (static, relative, absolute, sticky, fixed),
семейства шрифта (sans, serif, mono), начертания (bold, italic) и
обрезки текста (truncate).
Сокращения не выводятся механически. У ширины есть w-, а у прозрачности
короткой формы o- нет — только opacity-. Точное имя проверяйте в
справочнике утилит.
Параметр: ось, сторона, угол
Параметр уточняет, к какой части элемента относится свойство. Он стоит сразу после имени свойства.
Оси. x — горизонталь, y — вертикаль: overflow-x-auto, gap-y-2,
scale-x-2. Для выравнивания во Flex и Grid используются оси раскладки:
main — основная ось (по направлению потока), cross — поперечная. Так
устроены items-cross-center и self-main-end.
Стороны. Вертикальные стороны называются физически — top, bottom.
Горизонтальные — логически: inline-start (начало строки) и inline-end
(конец строки). В документе слева направо начало строки слева, в документе
справа налево — справа.
<p class="p-inline-start-2 m-bottom-1">…</p>
Горизонтальные стороны и выравнивание пишутся только логическими именами:
p-inline-start-*, m-inline-end-*, inline-start-0, text-start,
float-inline-start. Физических имён left и right у этих утилит нет.
Почему так — в Тема и направление письма — не условия.
Для обеих сторон оси есть парные параметры. У внутреннего отступа это x и
y (p-x-2, p-y-2), у внешнего — inline и block (m-inline-auto,
m-block-2). Оба варианта логические: p-x-2 тоже задаёт
padding-inline-start и padding-inline-end. Пар m-x-* и p-inline-* нет.
Углы. Угол называется двумя сторонами: сначала вертикальной, затем
логической горизонтальной — radius-top-inline-start-2,
radius-bottom-inline-end-1/2. Сторона целиком — одним словом:
radius-top-2, radius-inline-end-2.
Параметр отличается от значения тем, что после него всегда идёт значение. В
p-top-2 слово top — параметр. В bg-top или text-start то же слово —
значение.
Ограничение: min- и max-
Ограничение задаёт предел свойства и ставится перед его именем:
min-w-0, min-w-fit, max-w-full, max-w-screen, max-h-screen.
max-w-screen
│ │ └──── значение
│ └────── свойство
└────────── ограничение
Этим ограничение отличается от значения с похожим словом: в w-min слово
min — значение («ширина по минимальному содержимому»), а в min-w-0 —
ограничение.
Отрицательные значения
Отрицательное значение обозначается минусом перед всем классом, включая
условие: -m-2, -m-top-1, -translate-x-1, -lg:m-2. Минус допустим
только там, где отрицательное значение имеет смысл: у внешних отступов,
позиции, смещения. Отрицательного внутреннего отступа нет.
Особый случай — z--1: здесь минус относится к самому значению (z-index
со значением -1), поэтому стоит после дефиса.
Спецсимволы в имени
В имени утилиты встречаются двоеточие (md:p-2) и косая черта (w-1/2). В
атрибуте class они пишутся как есть. В CSS-селекторе и в
querySelector их нужно экранировать: .md\:p-2, .w-1\/2.
Смотрите также: Значения — значения; Условия действия — условия; Тема и направление письма — не условия — логические стороны.