Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prefix option in config not working as expected #527

Closed
H7ioo opened this issue Feb 11, 2025 · 2 comments
Closed

Prefix option in config not working as expected #527

H7ioo opened this issue Feb 11, 2025 · 2 comments
Labels
context-v3 Related to tailwind-merge v3

Comments

@H7ioo
Copy link

H7ioo commented Feb 11, 2025

Describe the bug

Using extendTailwindMerge prefix option doesn't work as expected.

To Reproduce

https://codesandbox.io/p/devbox/summer-architecture-f4f8ld

import { extendTailwindMerge, twMerge } from "tailwind-merge";

(() => {
  const customTwMerge = extendTailwindMerge({ prefix: "plasmo-" });

  const className =
    "plasmo-text-3xl plasmo-text-4xl plasmo-text-sm text-3xl text-4xl text-sm";

  console.log("Default", twMerge(className));
  console.log("Custom", customTwMerge(className));

  /*

   Default plasmo-text-3xl plasmo-text-4xl plasmo-text-sm text-sm                                                                                                                                     
   Custom plasmo-text-3xl plasmo-text-4xl plasmo-text-sm text-3xl text-4xl text-sm                                                                                                           
  
*/

  const customTwMerge2 = extendTailwindMerge({ prefix: "tw-" });

  const className2 =
    "tw-text-3xl tw-text-4xl tw-text-sm text-3xl text-4xl text-sm";

  console.log("Default", twMerge(className2));
  console.log("Custom", customTwMerge2(className2));

  /*
 
 Default tw-text-3xl tw-text-4xl tw-text-sm text-sm                                                                                                                                                    
 Custom tw-text-3xl tw-text-4xl tw-text-sm text-3xl text-4xl text-sm 
  
*/
})();

Expected behavior

Expected behavior
Custom tw-text-3xl tw-text-4xl tw-text-sm text-3xl text-4xl text-sm

Environment

  • tailwind-merge version: 3.0.1

Additional context

Edit 1:
This works on v2.6.0 but not on v3.0.0 and v3.0.1

Edit 2:
Prefix defined in config shouldn't include combining - character anymore by @dcastil in https://github.com/dcastil/tailwind-merge/pull/518
I tried removing the - still not working as expected

@github-actions github-actions bot added the context-v3 Related to tailwind-merge v3 label Feb 11, 2025
@H7ioo
Copy link
Author

H7ioo commented Feb 11, 2025

Sorry
Supports Tailwind v4.0 (if you use Tailwind v3, use [tailwind-merge v2.6.0](https://github.com/dcastil/tailwind-merge/tree/v2.6.0))

@H7ioo H7ioo closed this as completed Feb 11, 2025
@dcastil
Copy link
Owner

dcastil commented Feb 11, 2025

Ah you already answered it! Keep in mind that you'll need to change the prefix to just plasmo when you upgrade to Tailwind CSS v4 and tailwind-merge v3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
context-v3 Related to tailwind-merge v3
Projects
None yet
Development

No branches or pull requests

2 participants