i used to work with mui react library on an existing project. lately I implemented a datePicker from tailwind tailwind css but it impacted the base CSS of the mui react implemented components.

this is my tailwind.config.js file :

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
    ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js file :

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

I created a separate css file for the datePicker classes :

@tailwind base;
@tailwind components;
@tailwind utilities;

.datepicker-small .react-tailwindcss-datepicker-calendar {
    font-size: 0.875rem;
    width: 150px;
    max-height: 250px;
    padding: 0.2rem;
    overflow: auto;
    z-index: 1300;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

and import this css file in my component :

import Datepicker from "react-tailwindcss-datepicker";
import '../../../../views/user/assets/css/tailwindStyleSheet.css'; // Tailwind styles
import DialogTitle from "@mui/material/DialogTitle";
import Button from '@mui/material/Button';
return (<ThemeProvider theme={theme}>
 <Dialog maxWidth={'md'} onClose={handleClose} open={open}  PaperProps={{
            style: { overflow: 'visible', maxHeight: '90vh' },
        }}  >....
  <div className="datepicker-small relative" style={{width:"70%"}}>
                                <Datepicker
                                    fixedHeight
                                    popoverDirection="up"
                                    useRange={false}
                                    value={selectedDateRange}
                                    onChange={handleDateRangeChange}
                                    separator={"to"}
                                    disabled={jsonOption !== "Custom"}
                                    readOnly={true}
                                />
                                {error && <span className="text-red-500" style={{fontSize:'13px', paddingLeft:"4%"}}>{error}</span>}
                            </div>

i tried to add the : preflight:false to the tailwind.config.css file but it disabled all the datepicker tailwind css :

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
    ],
  theme: {
    extend: {},
  },
    corePlugins: {
    // Remove the Tailwind CSS preflight styles so it can use Material UI's preflight instead (CssBaseline).
    preflight: false,
},
  plugins: [],
}

also i tried to add :

  prefix: 'tw-',

but nothing worked for me!