How to merge p-0 px-1

[neel1998]

Is there a way that when I try to merge p-0 px-1 the applied styles are,

{
    padding-top: 0px; //from p-0
    padding-bottom: 0px; //from p-0
    padding-left: 4px; //from px-1
    padding-right: 4px; //from px-1
}

[dcastil]

Hey @neel1998!

That is supported by tailwind-merge by default. tailwind-merge won't remove classes that are refining preceding classes.

import { twMerge } from 'tailwind-merge'

twMerge('p-0 px-1') // → 'p-0 px-1'

[neel1998]

Hi, @dcastil thank you for the response. My query was... would twMerge('p-0 px-1') give me the behavior of py-0 px-1 ?

[dcastil]

Ah, tailwind-merge doesn't support changing classes like this (p-0 to py-0 when followed by px-1) because that would increase the bundle size too much for not much benfit.

But I'm not sure what you'd need that for. When you add the classes p-0 px-1 to a node you get the same behavior as py-0 px-1. Or am I missing something?

[neel1998]

Yeah, I got it. Thanks a lot!