composite class does not merge with individual class

[unional]

Describe the bug

Hi @dcastil, this is sort of both a bug and a feature.

tailwind-merge current behavior for merging composite class with their individual class like this:

const a = twMerge('pl-1 p-0') // 'p-0'
const b = twMerge('p-0 pl-1') // 'p-0 pl-1'

This works fine locally, I believe, even with this:

const b = twMerge('p-0 pl-1') // 'p-0 pl-1'
const c = twMerge('p-0') // 'p-0'

because tailwind will place the .p-0 class before .pl-1 class:

.p-0 { ... }

.pl-1 { ... }

However, it will not work when a Tailwind app consuming a Tailwind lib:

// lib
export const A = ({ className }) => <div className={twMerge('p-0', className)}/>

/* got className='p-0 pl-1' */
export const B = ({ className }) => <A className='pl-1' />

// app
import { A, B } from 'lib'

export const C = () => (
  <div className='p-0'>
    <A />
    <B />
  </div>
)

Since p-0 appears in app, the resulting CSS:

/* from lib */
.p-0 { ... }
.pl-1 { ... }

/* from app */
.p-0 { ... }

This cause B to rendered with p-0 instead of pl-1.

PostCSS plugin postcss-discard-duplicates could not help here because it kept the last duplicate:

/* from lib */
/* .p-0 { ... } -- removed by postcss-discard-duplicates */
.pl-1 { ... }

/* from app */
.p-0 { ... }

One solution I can think of is transform p0 pl-1 to pr-0 pt-0 pb-0 pl-1.
But then tailwind couldn't generate the right classes.

[unional]

ref: cssnano/cssnano#1583

[dcastil]

Hey! Yeah Tailwind CSS and tailwind-merge both rely heavily on the order of the CSS, so merging two Tailwind CSS stylesheets causes issues like this.

When using an independent lib which has its own Tailwind config in a project with its own Tailwind config, the typical solution I'm aware of is to add a prefix to one of the two Tailwind configs. Then you can still merge classes between the two, see #537.

[unional]

Thanks for confirming that.

It also means that when working on a monorepo containing multiple packages of components using the same prefix, I have to use the tailwind config content (v3) or source (v4) to scan the source code of the depending packages.

One drawback is that it breaks the encapsulation on dependencies, i.e. we need to also update and include the transient dependencies.

v3 can get around that by importing the tailwind.config.js and combine the content (still need some custom transform),
but v4 doesn't have a way to do that because the config is css.

[dcastil]

You can still use a JS config in Tailwind CSS v4 → https://tailwindcss.com/docs/functions-and-directives#config-directive

[unional]

Yeah, but that's a temporary solution. Tailwind team said it will be removed in the future.