使用Mantine7.x与TailwindCSS组合（效果不太好）

2 年 ago

科, 颖

3 minutes

由于Mantine升级到了7系，它变成了原生CSS。
如果使用Mantine，可以使用内联样式，但说实话，使用Tailwind类来进行细微的样式修正更方便易用。。。

那么，我打算利用我们现在所共享的环境。
顺便一提，我也想试试使用bun命令行界面。

因为不太明白，所以我会试一试，可能不会成功。

如果使用边框，没有使用边框样式等，可能无法正确使用。
而且，由于去除了@tailwind基础样式，初始窗口大小可能出现一些问题。

项目的创建

本次我们将使用Vite + React进行创建。

bun create demo-app --template react-ts

一旦完成后，将项目移至进行安装依赖并尝试运行。

cd demo-app
bun install
bun run dev

安装TailwindCSS

做法就按照官方指示来

bun add --dev tailwindcss postcss autoprefixer
bun x tailwindcss init -p

设置tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
export default {
-   content: [],
+   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建CSS文件

+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

用TSX在CSS中导入

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App.tsx"
- import "./index.css"
+ import "./style.css"

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

这样，只需在运行“bun run dev”时，就可以使用Tailwind了。
由于有点麻烦，将删除不必要的文件。
删除 src/{App,index}.css。
虽然没在这里说明，但顺便还要从TSX中删除不必要的import。

Mantine的设置。

我在查看Mantine的指南时，适当进行调整。

安装需要的库到 Mantine 和 PostCSS。

bun add @mantine/core @mantine/hooks
bun add --dev postcss-preset-mantine postcss-simple-vars

导游册上没有写，但是要记得添加postcss-import。

bun add --dev postcss-import

从这里开始，我们会对代码进行修改。

公式手順
// 导入您安装的包的样式。
// 除`@mantine/hooks`之外的所有包都需要样式导入
import ‘@mantine/core/styles.css’;import { MantineProvider } from ‘@mantine/core’;

export default function App() {
return {/* 在这里放入您的应用程序 */};
}

不需导入CSS，只需添加MantineProvider。

- import React from "react"; // 不要になるので削除
import ReactDOM from "react-dom/client";
+ import { MantineProvider } from "@mantine/core";
import App from "./App.tsx";
import "./style.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
-   <React.StrictMode>
+   <MantineProvider>
    <App />
+   </MantineProvider>
-   </React.StrictMode>
);

CSS的导入可以通过src/style.css来执行。

+ @import "@mantine/core/styles.layer.css";
- @tailwind base; /* Tailwindの基礎部分は削除する */
@tailwind components;
@tailwind utilities;

在指南中，我们导入了@mantine/core/styles.css。但是，当我们查看node_modules/@mantine/package.json时，发现styles.layer.css已经创建了。因此，我们在Layer中进行了导入操作。

{
  "exports": {
    ".": {
      "import": {
        "types": "./lib/index.d.mts",
        "default": "./esm/index.mjs"
      },
      "require": {
        "types": "./lib/index.d.ts",
        "default": "./cjs/index.js"
      }
    },
    "./styles.css": "./esm/index.css",
    "./styles.layer.css": "./esm/index.layer.css",
    "./styles/*": "./esm/styles/*"
  }
}

在中国的母语中转述以下内容，只需要一个选项：
也需要更改PostCSS。

export default {
  plugins: {
+     "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
+     "postcss-preset-mantine": {},
+     "postcss-simple-vars": {
+       variables: {
+         "mantine-breakpoint-xs": "36em",
+         "mantine-breakpoint-sm": "48em",
+         "mantine-breakpoint-md": "62em",
+         "mantine-breakpoint-lg": "75em",
+         "mantine-breakpoint-xl": "88em",
+       },
+     },
  },
};

只要使用Mantine的组件，就可以基本上使用TailwindCSS。

顺便提一下，如果导入@tailwind base，会导致Mantine的按钮显示等方面出现各种问题。因此，如果要使用Mantine作为基础，好像最好不要导入，直接使用就可以了。

在这种状态下，即使调用Mantine组件，问题普遍存在ww

使用border时，仅使用border本身并不会显示，除非使用border-solid等其他属性，才能成功使用。还可能无法使用其他CSS属性。

考试（含有屏幕截图）

import { useDisclosure } from "@mantine/hooks";
import { Button, Loader, Drawer, Skeleton, Card } from "@mantine/core";

function App() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <div className="flex gap-2 my-4 mx-2">
        <Loader color="blue" />
        <Loader color="blue" type="bars" />
        <Loader color="blue" type="dots" />
      </div>
      <Drawer opened={opened} onClose={close} title="Authentication">
        Drawer content
      </Drawer>

      <Button onClick={open}>Open Drawer</Button>

      <Card
        shadow="sm"
        padding="lg"
        radius="md"
        withBorder
        className="w-80 m-8"
      >
        <Skeleton height={50} circle mb="xl" />
        <Skeleton height={8} radius="xl" />
        <Skeleton height={8} radius="xl" mt={6} />
      </Card>
    </>
  );
}

export default App;