Merging Spacing Classes

[rjvim]

Thanks for this library and initiative, This aims to solve a big use for me while building UI components for react/vue. Usually, when the components give default styling, overriding them is immense pain, and the developer who is developing the component has to give various props to override such classes. But by using this library, a developer can override existing props in the most minimal way; at least, that's how I visualize its usage.

I have tried playing around and found a gap.

If we take an example like follows:

twMerge('p-3', 'py-2 px-4')

The output from library is: p-3 py-2 px-4

Shouldn't it be: py-2 px-4? Is that what this library is aiming to do?

If I take some use cases, I think it would be more useful if merging is intelligent like follows:

• twMerge('p-3', 'py-2 px-4') = py-2 px-4
• twMerge('p-3', 'px-4') = py-3 px-4
• twMerge('p-3', 'py-4') = px-3 py-4
• twMerge('p-3', 'pl-4') = pl-4 pr-3 py-4 (This kind of breakdown gives ability to override props with much more power)

Please let me know if the examples I presented are part of the roadmap or I misunderstood the library's purpose.

[dcastil]

Hey @rjvim! 👋

You're right, tailwind-merge should ideally remove the p-3 class here. The reason why it is not removed is following:

1. tailwind-merge allows refinements. That means if you do twMerge('p-3 py-2') or twMerge('p-3 px-4'), both classes are preserved. I'm doing this because if you add py-2, you probably still want to keep the vertical padding p-3 provides.
2. Adding a check for when all refinements of a class are present to remove the base class would slow down tailwind-merge at runtime and add to its bundle size. So I'd only add this check if it is really necessary.
3. Tailwind CSS specifies its classes so that these refinements like py-2 and px-4 always override classes like p-3. That means if we leave the p-3 class in there together with py-2 px-4, it will have no effect as vertical and horizontal padding will be overridden. That in turn means that we don't need to remove that class with tailwind-merge.

Hope that explanation helps. But I have to admit that it looks weird to leave the p-3 class in there. If I find an easy way to remove it within tailwind-merge, I'll probably do it. 😊

[dcastil]

(referenced in #359 (comment))

[ohearonkg]

Hey @dcastil - Would you mind point me to where you were able to find:

Tailwind CSS specifies its classes so that these refinements like py-2 and px-4 always override classes like p-3.

:)

[dcastil]

@ohearonkg not sure anymore where I have this info from. My best guess would be from Adam Wathan's tweets. You can also see it in the codebase that the plugins are defined such that in the generated CSS file, more granular rules will override les granular ones, e.g. by placing p-* before px-* which itself is before pl-*.

[dcastil]

(referenced in #368 (comment))