有没有办法可以在不将预检设置为 false 的情况下将 MUI 与 tailwindcss 一起使用？

Question

我想在我已经使用 tailwindcss 设置的项目上使用 MUI 组件。默认情况下，启用预检后，MUI 组件样式与顺风样式冲突，并且我得到奇怪的 css，例如输入字段的浮动标签与焦点边框相交。

我尝试将预检设置为 false，但它导致 tailwind css 无法正确应用，因为 @layer 基础的样式未应用。有什么方法可以让我使用顺风预检和 MUI 组件而不发生冲突？

Answer 1

以下是管理集成的一些方法：

1. 覆盖 MUI 的 CSS 基线： MUI 使用

   CssBaseline

   组件来应用类似于 Tailwind 的

   preflight

   的全局样式。您可以在需要时覆盖 MUI 的

   preflight

   ，而不是禁用 Tailwind 的

   CssBaseline

   。

将此添加到您的主条目文件中（例如，

index.js

或

App.js

）：

import { CssBaseline } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

// Create a custom theme without MUI's baseline styles
const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        // Override global styles to avoid conflicts with Tailwind
        body: {
          margin: 0,
        },
        '*': {
          boxSizing: 'border-box',
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {/* Your App components go here */}
    </ThemeProvider>
  );
}

export default App;

这允许您保留 Tailwind 的

preflight

，同时删除一些可能与之冲突的 MUI 全局样式。

2. 范围内 MUI 用法：

不要在全局范围内应用 MUI 组件，而是将它们限制在应用程序的特定部分。使用 Tailwind 进行大部分布局和样式设置，并仅在必要时应用 MUI 组件。这可以帮助防止不需要的样式覆盖。

3. 自定义 Tailwind 的预检：

如果 Tailwind 预检的某些部分与 MUI 冲突，您可以自定义预检而不是完全禁用它。 Tailwind 的

preflight

可以在您的

tailwind.config.js

文件中扩展或调整：

module.exports = {
  corePlugins: {
    preflight: true,
  },
  theme: {
    extend: {
      // Your custom settings here
    },
  },
};

通过结合这些策略，您可以在不关闭的情况下有效地使用 MUI 和 Tailwind

preflight

。