⚡ Кратко
clsx — условные классы, tailwind-merge —
конфликты, cva — варианты, @utility — своя утилита.
Пакеты
| Пакет | Зачем | Установка |
|---|
clsx | склеить классы по условию | npm i clsx |
tailwind-merge | убрать конфликтующие утилиты | npm i tailwind-merge |
class-variance-authority | варианты и размеры компонента | npm i class-variance-authority |
prettier-plugin-tailwindcss | сортировка классов | npm i -D prettier-plugin-tailwindcss |
npm install clsx tailwind-merge class-variance-authority
Функция cn
// src/lib/utils.ts
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
| Вызов | Результат |
|---|
cn("p-4", "p-6") | "p-6" |
cn("p-4", false && "p-6") | "p-4" |
cn("bg-white", isDark && "bg-slate-900") | зависит от условия |
cn("px-4 py-2", className) | внешние классы побеждают |
cva: структура описания
const variants = cva(
"базовые классы", // применяются всегда
{
variants: {
variant: { default: "…", outline: "…" },
size: { sm: "…", md: "…", lg: "…" },
},
compoundVariants: [ // сочетание условий
{ variant: "outline", size: "sm", class: "border-2" },
],
defaultVariants: { variant: "default", size: "md" },
}
)
| Поле | Назначение |
|---|
| первый аргумент | классы, общие для всех вариантов |
variants | наборы взаимоисключающих значений |
compoundVariants | правила для сочетаний |
defaultVariants | значения по умолчанию |
VariantProps<typeof variants> | типы пропсов для TypeScript |
Директивы CSS
| Директива | Когда применять |
|---|
@utility имя { … } | своя утилита, работающая с вариантами |
@apply … | только для чужой разметки и базовых стилей |
@layer base { … } | стили тегов: body, ссылки, заголовки |
@layer components { … } | класс, который утилиты должны уметь перебивать |
@custom-variant имя (…) | свой модификатор |
/* src/index.css */
@import "tailwindcss";
/* своя утилита: работает с вариантами, как встроенные */
@utility scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--color-slate-400) transparent;
}
Сортировка классов
// .prettierrc
{
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindStylesheet": "./src/index.css"
}
⚠️ Проверить по документации: имя опции,
указывающей плагину на ваш CSS-файл с темой, зависит от версии плагина —
сверьтесь с README пакета.