在 Tailwind 预检后加载 mantine 样式答案

【问题标题】：Load mantine styles after Tailwind preflight在 Tailwind 预检后加载 mantine 样式
【发布时间】：2023-02-07 12:53:05
【问题描述】：

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

您可以禁用预检：

  corePlugins: {
    preflight: true
  }

但根据this suggestion，我宁愿保持启用状态并在之后加载 Mantine CSS。

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

【问题讨论】：

这个 GH 问题可能与您的问题相关：github.com/mantinedev/mantine/issues/823。

标签： reactjs next.js tailwind-css mantine

【解决方案1】：

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

import {
  MantineProvider,
  createEmotionCache
} from '@mantine/core';

const myCache = createEmotionCache({
  key: 'mantine',
  prepend: false
});

<
MantineProvider emotionCache = {
    myCache
  } > {
    children
  } <
  /MantineProvider>

【讨论】：

使用此解决方案时，最初加载页面时会导致布局偏移（我的 CSS 跳转），似乎 emotionCache 是在之后加载的......

【解决方案2】：

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

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

【讨论】：

module.exports = { mode: "jit", content: ["./src/**/*.{js,ts,jsx,tsx}"], corePlugins: { preflight: false // 避免与 mantine 主题冲突， stackoverflow.com/questions/72083381/… }, 主题: { 扩展: {}, }, 插件: [], };
@Pencilcheck 不确定你在说什么......
我试图复制我的 tailwind 配置的内容预检禁用看起来如何
解决此问题的另一种方法是添加您自己的 mantine 情感缓存并禁用前缀：github.com/mantinedev/mantine/issues/823

【解决方案3】：

因此，在您导入顺风样式的全局样式表中删除基本样式，因为它们将覆盖一些 mantine 样式。它应该看起来像这样

@tailwind components;
@tailwind utilities;

【讨论】：