v3.2.2

No significant changes

    View changes on GitHub

v3.2.1

   🐞 Bug Fixes

• Update cn function type and import cx from tailwind-variants/lite  -  by @jrgarciadev in #285 (3a3af)

    View changes on GitHub

v3.2.0

   🚀 Features

• Add cx function and refactor cn to use tailwind-merge  -  by @jrgarciadev in #278 (8ec5f)

   🐞 Bug Fixes

• No longer minifyng the code  -  by @jrgarciadev in #282 (34c62)
• Make twMerge default to true in cn function  -  by @jrgarciadev in #283 (1659a)
• Export defaultConfig as value and remove responsiveVariants  -  by @jrgarciadev in #284 (65ee7)

    View changes on GitHub

v3.1.1

   🐞 Bug Fixes

• Use 'type' for type-only imports and specify file extensions  -  by @tmkx in #272 (58aa7)

    View changes on GitHub

v3.1.0

   🚀 Features

• Export config types  -  by @tianenpang in #267 (5fd06)

    View changes on GitHub

v3.0.0

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.

    View changes on GitHub

v2.1.0

   🚀 Features

• Implement lazy loading for tailwind-merge module  -  by @jrgarciadev in #257 (e80c2)

    View changes on GitHub

v2.0.1

• Update tsup configuration to enable cleaning and minification

    View changes on GitHub

Full Changelog: v2.0.0...v2.0.1

v2.0.0

Breaking Changes 🚨

tailwind-merge is now an optional peer dependency

In v2, we've made tailwind-merge an optional peer dependency to reduce bundle size for users who don't need Tailwind CSS conflict resolution.

What changed?

• tailwind-merge is no longer bundled with tailwind-variants
• Users who want conflict resolution must install it separately
• Users who don't need conflict resolution can save ~3KB in bundle size

Migration Steps

If you use the default configuration with twMerge: true (conflict resolution enabled):

# npm
npm install tailwind-merge

# yarn
yarn add tailwind-merge

# pnpm
pnpm add tailwind-merge

If you don't need conflict resolution, disable it in your config:

const button = tv(
  {
    base: "px-4 py-2 rounded",
    variants: {
      color: {
        primary: "bg-blue-500 text-white",
        secondary: "bg-gray-500 text-white",
      },
    },
  },
  {
    twMerge: false, // Disable conflict resolution
  },
);

Performance Improvements

v2 also includes significant performance optimizations:

• 37-62% faster for most operations 🚀
• Optimized object creation and array operations
• Reduced function call overhead
• Better memory usage

All existing APIs remain the same, so no code changes are required beyond the tailwind-merge installation.

v1.0.0

What's Changed

• feat: support tailwindcss v4 by @winchesHe in #245

Breaking change

• The responsiveVariants option has been removed.
• withTv has been removed.

New Contributors

• @winchesHe made their first contribution in #245

Full Changelog: v0.3.1...v1.0.0