Background opacity getting overridden by the bg-color opacity in production

[rishabh2712]

What version of Tailwind CSS are you using?
"^2.2.7"

What build tool (or framework if it abstracts the build tool) are you using?
Next.js 11.0.1

What version of Node.js are you using?
v12.18.3

What browser are you using?
Chrome, Safari, Firefox

What operating system are you using?
macOS

Describe your issue
The bg-opacity is not getting applied as its getting overridden by the background color's own opacity. This is the behaviour only in production. Dont know what is it that I missed.

[adamwathan]

Hey! Mind creating a small project that reproduces the issue? We use Next for almost all of our projects and I can’t reproduce this so need a real project to be able to troubleshoot.

[rishabh2712]

I am having this issue only in case of production build.

[adamwathan]

That's fine and doesn't matter for the reproduction, if you create a reproduction for me I can run a production build and look at it.

[NovusOpus]

You can try with: bg-white/10 or with Arbitrary value(For custom Sizes) : bg-white/[0.1] You will need to enable JIT if you don't have it enabled already, Working Example: Tailwind Play Link.

Generated code with bg-white/10 (Checked with Chrome Dev Tools):

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

Instead of generated code using bg-white with bg-opacity-10 (Checked with Chrome Dev Tools):

.bg-opacity-10 {
    --tw-bg-opacity: 0.1;
}

.bg-white {
    --tw-bg-opacity: 1; //this Strikethrough
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

Source from Tailwind CSS Docs if you want to learn more.

This is not really a fix but a work around, But if you really want to get to the bottom of why your original approach is not working(It should). Then as @adamwathan reply says, maybe create a small reproduction of your code/project for troubleshooting.

[DanielDeSousaDEV]

I encountered the same error in version 4. I noticed that in the production CSS, there is an extra minus (-) that causes the compiled CSS to throw an error during the build on Netlify.

For example, in the production build on Netlify:

However, in my local build, everything compiles correctly without errors:

The interesting part is that if I remove the extra minus (-) in the CSS during the Netlify build, it compiles normally. This indicates that the error is caused specifically by that extra character, and once it’s corrected, the production build works as expected.

(Sorry for bad english i use ChatGPT to translate)

[wongjn]

Try updating Tailwind CSS/Lightning CSS. This was a bug in Lightning CSS (a dependency) that I believe was fixed.

[DanielDeSousaDEV]

I literally been working on this since my last message…, it worked! 🎉