Different CSS inject order in development and production (MUI/emotion and Tailwind)

[cibulka]

Hi! I'm trying to make TailwindCSS play nicely with MUI.

The problem I'm facing is a different behaviour between development and production. Take this:

import Skeleton from '@mui/material/Skeleton'
<Skeleton className="w-20 h-20" variant="circular" />

On development, Tailwind gets higher priority (is injected later, I assume), so it overwrites hardcoded MUI styles. That is the way I would prefer (especially as it seems that one can not remove CSS rules in current version of MUI).

On production, MUI (resp. emotion) takes over, which slaps height: 1.2rem over the Skeleton and squishes it.

So yeah, not the best dev experience. :) Just imagine the number of bugs you find out only after you deploy the thing.

I've created the repo where you can reproduce the problem. You know the drill:

npm install
npm run dev # development
npm run build && npm run start # production

Is this expected behaviour? Can I regulate this somehow (e.g. give Tailwind bigger priority)?

Also I assume that out of the three, I should ask those questions to Next.js, as it does the CSS importing.

Thank you!

[cibulka]

MUI actually exposes StyledEngineProvider with a parameters injectFirst that allows exactly that (so the MUI styles have lower priority). That fixes my problem!

import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={muiTheme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </StyledEngineProvider>
  );

The full solution is available in the repo above, branch withInjectOrder.

I still think thought that the inconsistency between development and production is an issue, so I'm leaving this thread open.

[cedricmarcelino]

Still works 2024

[hnykda]

Just awesome, thanks. Works on Nextjs 14 and tailwind 3.4

[avega93]

Still works April 2024

[yizzycool]

Thank you so much!
This solution also works with Next.js 14 + CSS Modules.

[abrzezina]

🥇