⚡ Кратко
Формула класса: свойство-оттенок-ступень[/прозрачность].
Например, bg-rose-500/40.
Цветовые утилиты
| Класс | CSS | Где применяют |
|---|
bg-* | background-color | фоны, заливки кнопок |
text-* | color | текст, иконки со шрифтом |
border-* | border-color | рамки |
divide-* | цвет линий между детьми | списки, таблицы |
ring-* | цвет кольца | фокус, выделение |
outline-* | outline-color | доступный фокус |
decoration-* | цвет подчёркивания | ссылки |
placeholder-* | цвет подсказки в поле | формы |
caret-* | цвет курсора ввода | формы |
accent-* | accent-color | чекбоксы, радио, ползунки |
fill-*, stroke-* | SVG | иконки |
from-*, via-*, to-* | опорные точки градиента | обложки |
Оттенки палитры
| Группа | Оттенки |
|---|
| Нейтральные | slate, gray, zinc, neutral, stone |
| Тёплые | red, orange, amber, yellow |
| Зелёные | lime, green, emerald, teal |
| Синие | cyan, sky, blue, indigo |
| Фиолетовые и розовые | violet, purple, fuchsia, pink, rose |
| Служебные | black, white, transparent, current, inherit |
Образцы всех ступеней — в справочнике
«Палитра и OKLCH».
Особые значения
| Класс | Значение | Когда пригодится |
|---|
text-current | currentColor | иконка наследует цвет текста кнопки |
border-current | currentColor | рамка того же цвета, что текст |
bg-transparent | прозрачный | кнопка-призрак |
bg-inherit | от родителя | вложенные блоки |
bg-[#0f766e] | произвольный цвет | фирменный оттенок вне палитры |
bg-[oklch(0.7_0.2_140)] | произвольный OKLCH | точное значение из макета |
Градиенты
| Класс | Что делает |
|---|
bg-linear-to-r | линейный градиент слева направо |
bg-linear-to-br | по диагонали вправо-вниз |
bg-radial | радиальный градиент |
bg-conic | конический градиент |
from-sky-500 | начальная точка |
via-purple-500 | промежуточная точка |
to-indigo-500 | конечная точка |