Identify Tailwind custom classes

[ARiyou2000]

Describe the bug

I have custom border rados in my tailwind.config.js file

const config = {
  theme: {
    extend: {
      borderRadius: {
        card: "1.5625rem",
      }
    }
  }
}

To Reproduce

console.log(cn("rounded-lg", "rounded-xl", "rounded-card"));

result: rounded-xl rounded-card

Expected behavior

result: rounded-card

Environment

It doesn't make any difference but, Next.JS 13

• tailwind-merge version: 1.14.0 (latest)

Additional context

[hrynevychroman]

I think that error is in configuration tw-merge, it doesn't take it from tailwind.config.ts file (or other extension), have same error and is going to deep inside it to fix 🙁 Recipe for configuration: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config

[dcastil]

Hey @ARiyou2000! 👋

As @RomanHrynevych writes, tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately so it knows about the rounded-card class.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config.

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#usage-with-custom-tailwind-config.

Related: https://github.com/dcastil/tailwind-merge/discussions/276, https://github.com/dcastil/tailwind-merge/discussions/275, https://github.com/dcastil/tailwind-merge/issues/274, https://github.com/dcastil/tailwind-merge/issues/250, https://github.com/dcastil/tailwind-merge/issues/207

[dcastil]

Note to myself: Mentioned in https://github.com/dcastil/tailwind-merge/discussions/315#discussioncomment-7110197.

[silent-tan]

If you have customized the tailwind theme and find it painful to use tw-merge, is there any solution?

// tailwind.config.js
fontSize: {
    "8px": "8px",
    "10px": "10px",
    "12px": "12px",
    "14px": "14px",
    "16px": "16px",
    "18px": "18px",
    "24px": "24px",
  },
...

so that i have to do it for extendTailwindMerge

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [
        {
          text: ["8px", "10px", "12px", "14px", "16px", "18px", "24px"],
        },
      ],
      "text-color": [{ text: ["primary"] }],
    },
  },
});

so image i need to extend spacing，👋🏻

// tailwind.config.js
spacing: {
  "2px": "2px",
  "4px": "4px",
  "6px": "6px",
  "8px": "8px",
  "10px": "10px",
  "12px": "12px",
  "14px": "14px",
  "16px": "16px",
  "18px": "18px",
  "20px": "20px",
  "24px": "24px",
  "28px": "28px",
  "32px": "32px",
  "40px": "40px",
  "54px": "54px",
  "64px": "64px",
},

By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins.

[dcastil]

Hey @silent-tan! 👋

The spacing theme scale is supported by tailwind-merge! You can do this and the scale will be applied to all groups that use the spacing scale.

const twMerge = extendTailwindMerge({
    extend: {
        theme: {
            spacing: [(classPart) => /^\d+px$/.test(classPart)]
        }
    }
}) 

[dcastil]

Closing this one as resolved. Please let me know if there is still an issue.