Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
PunkFleet opened this issue Mar 16, 2024 · 2 comments
Open

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

PunkFleet opened this issue Mar 16, 2024 · 2 comments
Assignees
@brijeshb42
Labels
package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: question Community support but can be turned into an improvement

Comments

@PunkFleet
Copy link

PunkFleet commented Mar 16, 2024 •
edited

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
@PunkFleet PunkFleet added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 16, 2024
@zannager zannager added the package: system Specific to @mui/system label Mar 18, 2024
@danilo-leal danilo-leal changed the title Is there any way to apply the Tailwindcss dark: className in MUI? [material-ui] Is there any way to apply the Tailwind's dark: class prefix? Mar 18, 2024
@danilo-leal danilo-leal added package: material-ui Specific to @mui/material and removed package: system Specific to @mui/system labels Mar 18, 2024
@danilo-leal
Copy link
Contributor

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

@danilo-leal danilo-leal added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 18, 2024
@PunkFleet
Copy link
Author

PunkFleet commented Mar 19, 2024 •
edited

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!

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Mar 19, 2024
@brijeshb42 brijeshb42 added the support: question Community support but can be turned into an improvement label Mar 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brijeshb42 brijeshb42

Labels
package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@brijeshb42 @danilo-leal @PunkFleet @zannager