heroui-inc/tailwind-variants v3.0.0 on GitHub

What's new?

🚀 Features

Split tv into original and lite versions - by @tianenpang in #264 (0eb65)

Resolves #262, resolves #259, resolves #258, resolves #246

Problem with v2

#262, #246: slot names that match JS String prototype methods cause cnBase to produce corrupted class output.

#259: since cnBase no longer goes through twMerge, template strings aren’t formatted correctly.

#258: lazy-loading tailwind-merge prevents some classes from merging on the first render, but after HMR triggers.

Solution

#258: instead of using lazy-loading, we could split tv into two versions, the lite version no longer imports tailwind-merge, while the original version keeps a static import of tailwind-merge. This avoids the first-render merge issue caused by lazy-loading. An alternative would be making tv async to wait for lazy-loading, but that introduces a larger breaking change and worse dx.

#262, #246, #258: cnBase was enhanced to support functionality similar to classnames / clsx, it now properly filters and handles various input types and formats the final result (e.g., removing extra spaces or newlines), which was previously handled by twMerge.

Technical Details

Extracted tailwind-merge and related config logic into tw-merge.js, state.js, package exports (., ./lite) support tree-shaking during build.
Original and lite versions share the same core code and type declarations.
Moved cnBase to utils and renamed it to cn.
Lite version exports cn / cnBase without any tw-merge logic; original (index) exports retain the original behavior.
Tailwind merge's cache state is now maintained in state.js.

Testing

Covered utils/cn with comprehensive tests.
Used describe.each to run tests for both original and lite versions.

Breaking Changes 🚨

⚠️ Only affects users who do not use tailwind-merge, they should import from tailwind-variants/lite, for example:

import { createTV, tv, cn, cnBase } from "tailwind-variants/lite";

⚠️ In the lite version, createTV, tv, cn no longer accept config parameters (i.e., tailwind-merge config).

Version

Due to breaking changes, this will be a major release from 2.1.0 to 3.0.0.