Library. Tailwind-merge

🧱 Суть

tailwind-merge – утилита для объединения Tailwind-классов с устранением конфликтов.

Если несколько классов изменяют одно и то же CSS-свойство, библиотека оставляет только последний.

📦 Проблема

1. Конфликтующие классы

className="px-2 px-4"

Не всегда очевидно, какой класс в итоге применится.

✅ Решение

Использовать tailwind-merge для автоматического удаления конфликтующих классов.

💻 Код

Установка:

npm install tailwind-merge

Использование

import { twMerge } from 'tailwind-merge';
 
twMerge('px-2 px-4');

Результат:

px-4

Пример:

const buttonClass = twMerge(
	'px-4 py-2 bg-blue-500',
	isActive && 'bg-red-500'
);

Совместное использование с clsx

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';
 
const cn = (...args: Parameters<typeof clsx>) =>
	twMerge(clsx(args));

className={cn('btn', isActive && 'bg-red-500')}

🎯 Вывод

• tailwind-merge устраняет конфликты Tailwind-классов
• часто используется вместе с clsx
• удобно создать собственный helper cn()

🔗 Связано

• Library. Tailwind
• Library. Clsx
• Library. Sonner. Стилизация через Tailwind
• TSX. Сортировка JSX-атрибутов