Certain CSS styles not being applied when deployed on Vercel

[yijiuntay]

Summary

Dear fellow devs,

I have deployed a Next.js project on Vercel but noticed that some css styles are not being applied, primarily flex related styles.

For example,
I have this in my local dev (running 'npm run dev'):

so essentially there is a display: flex and justify-content: space-between for the component

but after deployed (or 'npm run build' and then 'npm run start'):

the display: flex is missing when inspected:

Wondering if anybody has encountered this before or knows the cause and how it can be solved. You may use this link https://github.com/yijiuntay/memory-game to clone the project and try to reproduce.

Thanks in advance ❤

Additional information

No response

Example

https://github.com/yijiuntay/memory-game

[icyJoseph]

Seeing this when building locally too. Didn't copy your repo, but just the css bits that are affected. Strange... but i think I've seen this before, I'll give it a go at producing a minimal repro. Perhaps it is the nesting?

[icyJoseph]

@yijiuntay I think you have to refactor so that footerIteam is not directly under footer. Something like:

.footer {
    display: flex;
    justify-content: center;
    gap: 2%;
  }

  & .footer .footerItem {

I guess the minification somehow process drops the flex rule... because it sees it up in .footer-

[icyJoseph]

Like if you remove the display flex on .footer it works fine for .footerItem -

[yijiuntay]

yea, after some trial and error, I think it's the nesting. I was able to fix the issue by rearranging the nesting, though I'm still not quite sure why the fix works

[icyJoseph]

I think it is the CSS minifier that's tripping itself. I'll do a bit of testing for that this weekend.

[Hanprogramer]

Same goes for me, object-position: top; is somehow removed automatically. I tried adding !important and not working as well

[caocanx]

Version 14.1.0 still have this issue，some nested display: flex auto removed after build. Some on can help? I just want use the normal nested css file.

[caocanx]

Add !important could make it work, but it just ugly.

[prokopious]

I am having an issue where my Next.js project's css is applied when I run it locally, but when deployed on Vercel, no styles at all are applied. I am not a frond-end specialist. This is just a portfolio for Python jobs, and it looks hideous without styles.

[caocanx]

You can try sass, it work well for me.

[grantbrewster]

this happens to me too, I can't seem to figure it out and I'm going crazy

[danidg2588]

This is the answer, install and use sass, the same happened to me, and sass fixed it, I also think the problem is the nesting.

[danidg2588]

You may try using sass, it is pretty much likely to work for you.

…

On Mon, 7 Apr 2025 at 12:34, Aloukik Joshi ***@***.***> wrote: @caocanx <https://github.com/caocanx> and @danidg2588 <https://github.com/danidg2588> I am facing the same issue but my tech stack is based on React + Vite. Will saas <https://nextjs.org/docs/app/building-your-application/styling/sass> work or is there any other solution? — Reply to this email directly, view it on GitHub <#52018 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5UJAMLKS5RV74OC7RCJR4D2YKZKPAVCNFSM6AAAAABVGEZUZ6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENZVGQZTCMI> . You are receiving this because you were mentioned.Message ID: <vercel/next .***@***.***>