[英]Load mantine styles after Tailwind preflight
I'm trying to use Mantine and Tailwind together, however Tailwind's "preflight" base styles are overriding Mantine's resulting in a simple button being invisible.我正在尝试同时使用 Mantine 和 Tailwind,但是 Tailwind 的“预检”基础 styles 覆盖了 Mantine,导致一个简单的按钮不可见。
You can disable preflight:您可以禁用预检:
corePlugins: {
preflight: true
}
But I'd rather keep it enabled and load Mantine CSS after, per this suggestion .但我宁愿保持启用状态并在之后加载 Mantine CSS,根据这个建议。
Is there any way to specify order for this?有没有办法为此指定顺序?
Two steps: Add preflight: false
in tailwind.config.js
to disable the default两步:在tailwind.config.js
中添加preflight: false
禁用默认
Copy out https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css refereed by https://tailwindcss.com/docs/preflight and import it in your entry point复制https://unpkg.com/tailwindcss@3.2.4/src/css/preflight.css由https://tailwindcss.com/docs/preflight 引用并将其导入您的入口点
Create a Emotion Cache using createEmotionCache from Mantine core and set prepend to false.使用 Mantine 核心的 createEmotionCache 创建一个情感缓存,并将 prepend 设置为 false。 Then call it inside MantineProvider's emotionCache prop.然后在 MantineProvider 的 EmotionCache 属性中调用它。
import { MantineProvider, createEmotionCache } from '@mantine/core'; const myCache = createEmotionCache({ key: 'mantine', prepend: false }); < MantineProvider emotionCache = { myCache } > { children } < /MantineProvider>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.