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

[ajhenry]

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

[mnajdova]

Maybe @robertwt7 can help out here.

[ajhenry]

I’m thinking I’ll have to use the container prop on the popover to force it to use the proper react framework container but I haven’t had time to play around with it

[robertwt7]

This is actually a good point, any reason from the MUI team why PopOver component does not fall under the container, instead it falls under the body tag?

[mnajdova]

Sounds about right, it should be similar to as described in #33007 for the shallow dom - https://deploy-preview-33007--material-ui.netlify.app/material-ui/guides/shadow-dom/ :)

This deserves an docs update on our interoperability guide with Tailwind CSS - https://mui.com/material-ui/guides/interoperability/#tailwind-css and maybe even updating the project example. Would you like to give it a try @ajhenry ? @samuelsycamore can help, or take over if you don't have the bandwidth to do it :)

[ajhenry]

I think I can tackle this!

[smmccabe]

Is this possibly actually just the same issue as noted here? #33017 The bug is related to portals not to tailwind I think.

[mnajdova]

@smmccabe you linked the same issue, could you double check which issue you wanted to link here? :)

[smmccabe]

Clearly not at my best on a Friday, #26767

[ajhenry]

@mnajdova Added a PR to update the docs and an example. You were right about the shadow dom details 😄

[yksolanki9]

@ajhenry I'm working with nextjs and facing the same issue with autocomplete component. Can you guide me on how to fix it for nextjs?