Why are Tailwind CSS classes not working with Material UI <Button>?

I'm attempting to make a circular button with a Material UI icon, but my various efforts have failed to produce the desired shape. I am creating a React.js component for my project.

Version Detail :

node - 20.16.0

"dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@mui/icons-material": "^6.1.2", "@mui/material": "^6.1.2", "@mui/styled-engine-sc": "^6.1.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-native-linear-gradient": "^2.8.3", "react-router-dom": "^6.26.2", "styled-components": "^6.1.13" }, "devDependencies": { "@eslint/js": "^9.11.1", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.2", "autoprefixer": "^10.4.20", "eslint": "^9.11.1", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "postcss": "^8.4.47", "tailwindcss": "^3.4.13", "vite": "^5.4.8" }

Here are different approach I tried:

import Button from '@mui/material/Button';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';


/*----- Approach 1 ---------*/

<Button className='w-10 h-10 rounded-full'><MenuOpenIcon/></Button>


/*----- Approach 2 ---------*/

<Button
  sx={{
    width: '2.5rem',
    height: '2.5rem',  
    borderRadius: '9999px',
  }}
>
  <MenuOpenIcon />
</Button>


/*------ Approach 3 -------*/

import { styled } from '@mui/system';

import Button from '@mui/material/Button';

const StyledButton = styled(Button)`@apply w-10 h-10 rounded-full;`;


<StyledButton><MenuOpenIcon /></StyledButton>

Solution

<Button className='w-10 h-10 rounded-full'><MenuOpenIcon/></Button>

update your code with min with class as follows

<Button className='w-10 h-10 rounded-full min-w-10'><MenuOpenIcon/></Button>

to get perfect circle around your button, also you can increase or decrease size of icons by using font size class as follows

<Button className='w-10 h-10 rounded-full min-w-10'><MenuOpenIcon fontSize='medium'/></Button>

hope it will resolve your issue.