material-ui [material-ui] Is there any way to apply the Tailwind's `dark:` class prefix?

Summary

I follow this : https://mui.com/material-ui/integrations/interoperability/#tailwind-css and I use nextjs framework and tailwindcss is integrated in it. To make things easier, I tried adding the tailwind dark tag to a widget, but that doesn't work. I have configured the global dark toggle via MUI theme.tsx


const roboto = Roboto({
  weight: ['300', '400', '500', '700', '900'],
  subsets: ['latin'],
  display: 'swap',
});

export const useDarkMode = () => {
  const [mode, setMode] = useState<'light' | 'dark'>('light');
  // const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const colorMode = useMemo(
    () => ({
      toggleColorMode: () => {
        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
      },
    }),
    [],
  );

  const theme = useMemo(
    () => createTheme({
      palette: {
        // mode: prefersDarkMode? 'dark' : 'light',
        mode,
      },
      typography: {
        fontFamily: roboto.style.fontFamily,
      },
    }),
    [mode],
  );
  
  return { theme, colorMode };

}

export const DarkModeContext = createContext({ toggleColorMode: () => {} });

Layout.tsx

 <html lang="en">
      <body>
      <StyledEngineProvider injectFirst>
        <AppRouterCacheProvider options={{ key: 'css', enableCssLayer: true }}>
          <DarkModeContext.Provider value={colorMode}>
            <ThemeProvider theme={theme}>
              <Box sx={{ display: "flex" }}>
                <CssBaseline />
                <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
                  {children}
                </Box>
              </Box>
            </ThemeProvider>
          </DarkModeContext.Provider>
        </AppRouterCacheProvider>
      </StyledEngineProvider>
      </body>
    </html>

Examples

Like this className="bg-slate-300 dark:bg-slate-800"

<CardHeader className="bg-slate-300 dark:bg-slate-800" title="Hello" />

Motivation

No response

Search keywords: tailwindcss

Mar 16 '24 06:03 PunkFleet

Hey there @Birddle; thanks for the issue! Can you provide the code above in a reproducible Sandbox?

Mar 18 '24 19:03 danilo-leal

Hey there @Birddle; thanks for the issue! Can you provide the code above in a reproducible Sandbox?

Sorry for not quick response, i trying CodeSandbox.io but there have not Nextjs, so i open coding in here:

https://stackblitz.com/edit/stackblitz-starters-qfbxu9?file=app%2Ftheme.tsx

As you can see in the example, I just have a different file structure than the official docs, and I put the theme configuration in a separate file, but tailwindcss really doesn't do anything!

Mar 19 '24 15:03 PunkFleet

@PunkFleet Is this still an issue? I also see an error in the console in the StackBlitz reproduction you provided:

app/theme.tsx (15:20) @ document
ReferenceError: document is not defined

May 17 '24 13:05 ZeeshanTamboli

@PunkFleet Is this still an issue? I also see an error in the console in the StackBlitz reproduction you provided:
app/theme.tsx (15:20) @ document
ReferenceError: document is not defined

Yup, It's still not working and i giving up tailwindcss. This is Nextjs error, you could tring change it with

const theme = createTheme({
  components: {
    MuiPopover: {
      defaultProps: {
        container: typeof document !== 'undefined' ? document.getElementById("root") : null,
      },
    },
    MuiPopper: {
      defaultProps: {
        container: typeof document !== 'undefined' ? document.getElementById("root") : null,
      },
    },
    MuiDialog: {
      defaultProps: {
        container: typeof document !== 'undefined' ? document.getElementById("root") : null,
      },
    },
    MuiModal: {
      defaultProps: {
        container: typeof document !== 'undefined' ? document.getElementById("root") : null,
      },
    },
  },
});

But it still not working in local machine, not error and not working, just nothing

May 18 '24 00:05 PunkFleet

@PunkFleet I made it work. Here's the StackBlitz: https://stackblitz.com/edit/stackblitz-starters-vh3oos?file=app%2Fpage.tsx.

You used important: '#__next' in your Tailwind config, but there's no #__next root element in your HTML. This is for the Next.js pages router, not the app router you are using. See #40416. We need to update the docs.

For Tailwind CSS dark: prefix, add darkMode: 'class' in your config as per Tailwind's documentation. If using prefers-color-scheme, you don't need this. Otherwise, apply the dark class earlier in the HTML tree:

- <html lang="en">
+ <html lang="en" className={theme.palette.mode}>

Also, don't use CacheProvider because AppRouterCacheProvider already uses it internally.

There's an issue to add this example: #40802.

May 19 '24 10:05 ZeeshanTamboli