Tailwind styles aren't applied to Popover Menus when following Tailwind MUI interoperability docs

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using MUI style interoperability with tailwind and CRA/Next, we need to specify the important option in the tailwind config in order to correctly apply styles between the two frameworks.

All components of the React tree should fall under the container they are spawned in #root/#__next.

The Popover Menu elements uses Portals under the hood and doesn’t respect the React container and instead makes the container a child of the body element.

The means that no tailwind styles can be applied to any Menu children and anything contained within that popover element.

Example Component

const UserDropdown: React.FC = () => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    setAnchorEl(event.currentTarget);
  };
  
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Stack>
      <div
        className="cursor-pointer"
        id="basic-button"
        aria-controls="basic-menu"
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        <Avatar alt="Alt" src="source" />
      </div>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button",
        }}
        elevation={0}
      >
        <Stack className="w-12"> 
          {/* No classes from tailwind work anywhere in this component */}
          <MenuItem className="bg-black" onClick={() => {}}>My account</MenuItem>
        </Stack>
      </Menu>
    </Stack>
  );
};

Generates the following DOM tree

And as we can see, the Menu component falls outside the #__next react container

Expected behavior 🤔

The popover menu should be able to have styles applied to it correctly from other CSS frameworks like the rest of the components.

This may mean that it should be generated within the React container that spawned it

Steps to reproduce 🕹

Steps:

1. Integrate Tailwind with a MUI project by following the docs listed below
2. Add a Menu component trigger by a Popover
3. Add tailwind styles and notice they are not applied

Context 🔦

When following the docs at MUI Tailwind Inoperability it says to specify #__next/#root as the select to apply important to.

However the Menu component gets generated as a child of the body element which falls outside of the React container. This breaks the css important selector and means tailwind cannot be applied to Menu children

Your environment 🌎

`npx @mui/envinfo`

Tested On Chrome

  System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 248.31 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Managers:
    Homebrew: 3.4.11 - /opt/homebrew/bin/brew
    pip3: 21.2.4 - ~/.pyenv/shims/pip3
    RubyGems: 3.2.22 - /usr/local/opt/ruby/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 13.1.6 - /usr/bin/gcc
    Git: 2.36.1 - /opt/homebrew/bin/git
    Clang: 13.1.6 - /usr/bin/clang
    FFmpeg: 4.4.1 - /usr/local/bin/ffmpeg
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.16 - /opt/homebrew/bin/docker
  IDEs:
    Nano: 6.3 - /opt/homebrew/bin/nano
    VSCode: 1.67.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.18 - /usr/local/bin/go
    Java: 13.0.2 - /usr/bin/javac
    Perl: 5.30.3 - /usr/bin/perl
    Python: 3.9.6 - /Users/ajhenry/.pyenv/shims/python
    Python3: 3.9.6 - /Users/ajhenry/.pyenv/shims/python3
    Ruby: 3.0.2 - /usr/local/opt/ruby/bin/ruby
  Databases:
    SQLite: 3.37.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 102.0.5005.61
    Safari: 15.4

[ajhenry]

I think I can tackle this!

[mnajdova]

Maybe @robertwt7 can help out here.