Tailwind style doesn't seems to be apply inside Material-ui Drawer component in NextJs

I am trying to add styling inside a @mui/material/drawer component using tailwind.

import { Close } from "@mui/icons-material";
import { Box, Drawer, IconButton, TextField } from "@mui/material";
import { useContext} from "react";
import { SearchContext } from "store/context";

export default function SearchDrawer() {
  const { search, setSearchMode } = useContext(SearchContext);

  return (
    <Drawer open={search.searchMode} anchor="bottom">

      <Box sx={{ height: "100vh" }} className="bg-red-500">
      <IconButton onClick={() => { setSearchMode(!search.searchMode); }}><Close/></IconButton>
        <div>
          <TextField variant="outlined" sx={{display: 'block'}}/>
          <TextField variant="outlined" sx={{display: 'block'}}/>
        </div>
      </Box>

    </Drawer>
  );
}

Expected behavior is

<Box sx={{ height: "100vh" }} className="bg-red-500">

This line of code will make whole screen red, But Nothing happen. Output after render Tailwind styles are not applying on some of Material-ui components like "Drawer", "Dialog", "ToolTip" This all components are hover over other components.

Tailwindcss classes are not working in Tooltip & Dialog components #33424 - GitHub

This page says to modify material-ui theme,

        defaultProps: {
          container: rootElement,
        },
     },

But rootElement is available in Reactjs, How to do it on Nextjs.