`bg-blue/50` + `bg-opacity-100` doesn't change opacity

dcastil / tailwind-merge

Merge Tailwind CSS classes without style conflicts

https://npmjs.com/package/tailwind-merge

MIT License

4.59k stars 63 forks source link

`bg-blue/50` + `bg-opacity-100` doesn't change opacity #463

Closed hmaesta closed 2 months ago

hmaesta commented 2 months ago

I understand that these classes generate different outputs.

bg-blue/50 generates { background-color: rgb(0 0 255 / 0.5) }, which ignores the Tailwind variable --tw-bg-opacity
While bg-opacity-100 generates { --tw-bg-opacity: 1 }

However, this limitation is not documented.

Should it be documented? Or is this a bug?

dcastil commented 2 months ago

Hey @hmaesta! 👋

This is a limitation of Tailwind CSS but not tailwind-merge. tailwind-merge only decides how different classes in strings are merged together, but doesn't alter the resulting CSS.

Or am I misunderstanding what you mean? 🤔

hmaesta commented 2 months ago

This is a limitation of Tailwind CSS

That's what I thought, but I just wanted to be sure. I was hoping tailwind-merge could find a way around that limitation somehow. 😅

Thanks for the response.

dcastil commented 2 months ago

Yeah tailwind-merge can't change the CSS produced by Tailwind, only Tailwind CSS can do that. I suggest to open an issue in the https://github.com/tailwindlabs/tailwindcss repo.