cn: движок для объединения классов Tailwind без зависимостей

Проект `cn` — это новый движок для объединения классов Tailwind и разрешения конфликтов. Он замещает такие библиотеки, как `tailwind-merge` и `clsx`, сохраняя те же API и обеспечивая полное соответствие их функционалу. Одно из ключевых преимуществ `cn` — скорость, которая в 30 раз выше по сравнению с аналогами.

Библиотека не имеет зависимостей и может работать с любыми фреймворками, включая React, Vue, Svelte, Solid и Astro, а также в браузерах, Node, Bun, Deno и edge-окружениях. Она предназначена для использования в любых проектах, использующих Tailwind CSS, без необходимости в `shadcn/ui`.

Установка и использование

Чтобы установить `cn`, используй следующую команду:

npm i cn

Для нового проекта достаточно импортировать библиотеку и начать использовать:

import { cn } from "cn"

export function Button({
  className,
  active,
  ...props
}: React.ComponentProps<"button"> & { active?: boolean }) {
  return (
    
  )
}

Если ты уже используешь `shadcn/ui`, то можешь заменить исходные зависимости с помощью команды:

npx shadcn@latest migrate cn

Либо это можно сделать вручную, изменив существующий импорт.

Преимущества и производительность

Бенчмарки показывают, что `cn` значительно быстрее, чем комбинация `clsx` и `tailwind-merge`. Например, для большинства вызовов производительность составляет 10 нс, тогда как у `clsx` с `tailwind-merge` — 320 нс. При больших объемах данных, таких как работающие репозитории, `cn` показывает скорость в 37 раз выше, чем у комбинации.

Ограничения

• Библиотека поддерживает Tailwind CSS версии 4. Для версий 3 следует оставаться на `tailwind-merge` версии 2.
• Классы, которые выглядят как утилиты Tailwind, обрабатываются как таковые, что соответствует поведению `tailwind-merge`.
• Для динамически созданных имен классов необходимо использовать параметр `--safelist` при сборке.
• CLI требует Node версии 20 или выше.

Обрати внимание, что `cn` сохраняет совместимость с другими библиотеками и предоставляет аналогичный функционал, что делает переход к этой библиотеке удобным и простым.