I have setup my app propely to make things work but i have problem with modal component. When i do

<Button classname="bg-red-600">Click</Button>

Everything works fine. Same on other components but not modal How do i make styling work on this component?

import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";

export default function ModalLogin({ modalShow, onClose }) {
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
        setOpen(modalShow);
    }, [modalShow]);

    const handleClose = () => {
        setOpen(false);
        if (onClose) {
            onClose(false);
        }
    };

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box className="absolute top-1/2 left-1/2 w-64 bg-white border-solid border-2 border-black p-4">
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Text in a modal
                    </Typography>
                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

I have setup my app propely to make things work but i have problem with modal component. When i do

<Button classname="bg-red-600">Click</Button>

Everything works fine. Same on other components but not modal How do i make styling work on this component?

import * as React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";

export default function ModalLogin({ modalShow, onClose }) {
    const [open, setOpen] = React.useState(false);

    React.useEffect(() => {
        setOpen(modalShow);
    }, [modalShow]);

    const handleClose = () => {
        setOpen(false);
        if (onClose) {
            onClose(false);
        }
    };

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box className="absolute top-1/2 left-1/2 w-64 bg-white border-solid border-2 border-black p-4">
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Text in a modal
                    </Typography>
                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

• javascript
• reactjs
• material-ui
• tailwind-css

1 Answer 1

export default function ModalLogin({ modalShow, onClose }) {
  return (
    <div className="tailwind-modal-container">
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-title"
        aria-describedby="modal-description"
        className="flex items-center justify-center" 
      >
        <Box 
          className="bg-white rounded-lg shadow-xl p-6 max-w-md mx-auto outline-none"
          sx={{ 
            '&:focus': {
              outline: 'none', 
            },
          }}
        >
          <Typography id="modal-title" className="text-xl font-bold mb-4">
            Modal Title
          </Typography>
          <Typography id="modal-description" className="text-gray-600 mb-6">
            Modal content goes here
          </Typography>
          <button 
            onClick={handleClose}
            className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded"
          >
            Close
          </button>
        </Box>
      </Modal>
    </div>
  );
}

For this to work properly, make sure your Tailwind CSS is properly configured with PostCSS in your project setup, and that you've added the Material UI components to your Tailwind content configuration:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@mui/material/**/*.{js,jsx}", 
  ],
}

This approach lets you use Tailwind classes directly on MUI components while maintaining their functionality.