[Solved] Tailwind is not working together with styled material ui components in nextjs 13 in production but work in development – Material-ui

The Problem:

In a NextJS 13 project, Tailwind CSS and Styled Material UI components aren’t cooperating in production, though they work fine in development. The production build eliminates Tailwind CSS styles, rendering hover and other styling features defunct.

The Solutions:

Solution 1: Fix Tailwind and Material UI Order of Application

The root cause of the issue is that Tailwind CSS is applied first to components, and after that, Material UI styles are applied. Since the code is mainly styled with Tailwind, all of the styles have been overwritten by Material UI.

To fix this, follow the Material UI official documentation to inject Material UI styles first and only after that Tailwind.

Here’s the fix:

1. Install the @mui/styled-engine-sc package:

npm install @mui/styled-engine-sc --save

2. Import the createStyled function from the @mui/styled-engine-sc package and the createGlobalStyle function from the styled-components package:

import { createStyled, createGlobalStyle } from 'styled-components';
import { createTheme, ThemeProvider } from '@mui/material/styles';

3. Create a new file, for example, GlobalStyles.js, and add the following code:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  /* Your global styles here */
`;

export default GlobalStyles;

4. In the _app.js file, import the GlobalStyles component and wrap the ThemeProvider with it.

import GlobalStyles from './GlobalStyles';

function MyApp({ Component, pageProps }) {
  const theme = createTheme();

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

5. Finally, in the tailwind.config.js file, set the important option to false to ensure that Material UI styles take precedence over Tailwind styles:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    // ...
  },
  important: false,
  plugins: [],
};

With these changes, Material UI styles will be applied first, and then Tailwind will be applied, ensuring that Tailwind styles do not overwrite Material UI styles.

Video Explanation: