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

[hmaesta]

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]

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]

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]

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.