在 Tailwind 飞行前加载 mantine styles

Question

我正在尝试同时使用 Mantine 和 Tailwind，但是 Tailwind 的“预检”基础 styles 覆盖了 Mantine，导致一个简单的按钮不可见。

您可以禁用预检：

  corePlugins: {
    preflight: true
  }

但我宁愿保持启用状态并在之后加载 Mantine CSS，根据这个建议。

有没有办法为此指定顺序？

Answer 1

两步：在tailwind.config.js中添加preflight: false禁用默认

复制https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css由https://tailwindcss.com/docs/preflight 引用并将其导入您的入口点

Answer 2

使用 Mantine 核心的 createEmotionCache 创建一个情感缓存，并将 prepend 设置为 false。 然后在 MantineProvider 的 EmotionCache 属性中调用它。

 import { MantineProvider, createEmotionCache } from '@mantine/core'; const myCache = createEmotionCache({ key: 'mantine', prepend: false }); < MantineProvider emotionCache = { myCache } > { children } < /MantineProvider>