Tailwind CSSとMUIを併用する

Tailwind CSSとMUIを併用したい！

Material Tailwindを使うことも考えたが、react, react-domのバージョンのせいなのか、上手く動作しないことがあった。
Stackoverflowなど色々調べたところ、Material Tailwindやreact、react-domをダウングレードすればいいという解決策があったが、私の環境では上手くいかなかった。
(何か解決策あれば教えてください)

どうしてもMaterial Tailwindが使いたかったわけでもないので、
純粋にTailwind CSSとMUIを使うことにした。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  important: "#root", // これによりTailwindのスタイルがMUIより優先される
  theme: {
    extend: {},
  },
  corePlugins: {
    // MUIのリセットCSSと競合する可能性のある機能を無効化
    preflight: false,
  },
  plugins: [],
};

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import App from "./App";
import Register from "./Register";

// MUIのテーマをカスタマイズ
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/register",
    element: <Register />,
  },
]);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <RouterProvider router={router} />
    </ThemeProvider>
  </React.StrictMode>
);