Tìm kiếm trang web

reactjs - Liệu tailwind merge có hoạt động với các lớp tailwind có tiền tố không?


Tôi phải sử dụng các lớp tailwind với một tiền tố vì lý do xung đột, nhưng tailwind merge dường như không hoạt động với các lớp có tiền tố, ví dụ như tw-flex-1 thay vì flex-1

tôi đã thử cái này trong khi gỡ lỗi

console.log(twMerge("tw-bg-primary", "tw-bg-accent")); // logs "tw-bg-primary tw-bg-accent", but it should be "tw-bg-accent"
console.log(twMerge("bg-primary", "bg-accent")); // logs "bg-accent" 

Điều này hoạt động tốt, nhưng các lớp không hoạt động trừ khi chúng được thêm tiền tố

Câu trả lời #1

Những gì Leroy nói chính là câu trả lời, đây là điều đã giải quyết nó:

import { extendTailwindMerge } from "tailwind-merge";

export const twMerge = extendTailwindMerge({
  prefix: "tw-",
});