Merging Sizes

[SankarMS]

I have a basic component like this:

import { Button } from "@mui/material";
import { twMerge } from "tailwind-merge";

const Foo = ({className}: Props) => {
  const classes = twMerge('min-w-md', `${className ?? ""}`);
  return (
    <Button className={classes}></Button>
  );
};

export default Foo;

That I would like to use like this:

<Foo className="min-w-sm"/>

And have min-w-sm win since it's the last class defined. However, for some reason the classes resolution results in min-w-md. I even tried to extend tw merge like so:

import { extendTailwindMerge } from 'tailwind-merge'

const customTwMerge = extendTailwindMerge({
  // ↓ Add values to existing theme scale or create a new one
  theme: {
    spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'],
  },
});

export default customTwMerge;

And then update the code like so

  const classes = customTwMerge('min-w-md', `${className ?? ""}`);

But that didn't change anything. How do I get the sizing resolution to work?

[dcastil]

Hey @SankarMS! 👋

Tailwind CSS doesn't support T-shirt sizes for min-width classes out of the box. In case you added those sizes to your tailwind.config.js, then you can add them to tailwind-merge by adding them to the min-w class group like this:

const customTwMerge = extendTailwindMerge({
  classGroups: {
    'min-w': [{ 'min-w': ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'] }],
  },
})

// or

const customTwMerge = extendTailwindMerge({
  classGroups: {
    'min-w': [{ 'min-w': [validators.isTshirtSize] }],
  },
})

Hope that helps 😊