Custom classes getting removed

[themashcodee]

I created a new font size style but that is getting removed

tailwind config
module.exports = {
theme:{
extend:{
fontSize:{
"xxs": ['10px', '12px']
}
}
}
}

this is my component in nextjs application

<span
	className={`${merge_classes(
		"select-none rounded bg-green-600 px-2 py-0.5 font-medium text-white text-xxs",
		"",
	)}`}
>
    New
</span>

// this is merge_classes function
import { twMerge } from "tailwind-merge";

export const merge_classes = (...classes: string[]) => {
	return twMerge(...classes);
};

[dcastil]

Hey @themashcodee! 👋

tailwind-merge doesn't have access to the tailwind.config.js file and you need to configure it separately so it knows about the text-xxs 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: #302, #276, #275, #274, #250, #207

[themashcodee]

Thanks man!

[cabello]

Upon searching the issues and reading the docs I was still confused how to configure tailwind merge properly, this is what worked for me.

My incomplete tailwind.config.js had:

module.exports = {
  theme: {
    extend: {
      fontSize: {
        micro: [
          "0.625rem",
          {
            lineHeight: "110%",
            letterSpacing: "-0.0125rem",
          },
        ]
      }
   }
}

My twmerge call had className={classNames('text-micro', selected && 'text-white')} when the item was selected, the text-micro class was being removed resulting in a white and large text.

Here is the extendTailwindMerge that I put together:

const customTwMerge = extendTailwindMerge({
  classGroups: {
    fontSize: ["text-micro"],
  },
})

It wasn't clear to me if I should have used theme, I tried but did not yield any results, also tried just micro without the text- prefix, but this was the only configuration that worked.

[dcastil]

The class group ID is incorrect, it should be font-size. You can find it here: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/src/lib/default-config.ts#L619

So this should make it work:

const customTwMerge = extendTailwindMerge({
  classGroups: {
    'font-size': ["text-micro"],
  },
})