Mantine7.xとTailwindCSSを合わせて使う(微妙にうまくいってない)

Mantineが7系になったことで、native CSSになりました。
Mantine使うなら、Inline styleを使えば良いのですが、
正直細かいスタイルの修正はTailwindのクラスを使った方が利用しやすい。。。

ってことで、合わせた環境を利用していこうと思います。
ついでにCLIはbun使ってみるかー的な思いもあったので

よくわからないままやってみるので、もしかしたらうまくいかないかも


:::note alert
`border`を使う場合、`border-style`とかも使わないと、うまく使えませんでした
他にも`@tailwind base`を抜いているので、初期ウィンドウサイズがおかしいなど少し問題はあるかも...
:::

## Project作成

今回はVite + Reactで作成します。

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

```bash
bun create demo-app --template react-ts
```

作成できたらプロジェクトに移動、依存関係をインストールしていったん動かしましょう

```bash
cd demo-app
bun install
bun run dev
```

## TailwindCSSのセットアップ

やり方は公式の通り

https://tailwindcss.com/docs/installation/using-postcss

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

`tailwind.config.js`をセットアップ
```diff_javascript:tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
-   content: [],
+   content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

CSSファイルを作成する
```diff_css:src/style.css
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
```

CSSをTSXでインポートする
```diff_tsx:src/main.tsx
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が使えるようになっている。
面倒なので、不要なファイルは削除しておく
`rm src/{App,index}.css `
ここに記載はしないが、合わせてTSXからも不要なimportは削除しておく

### Mantineのセットアップ

Mantineのガイドを見つつ、適宜変更していく

https://mantine.dev/guides/vite/

mantineとpostcssに必要なライブラリをインストールしていく

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

ガイドには書いてないが、`postcss-import`を追加しておく

```bash
bun add --dev postcss-import
```

ここから、コードを変更していく

<details><summary>公式の手順</summary>

```tsx
// Import styles of packages that you've installed.
// All packages except `@mantine/hooks` require styles imports
import '@mantine/core/styles.css';

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

export default function App() {
  return <MantineProvider>{/* Your app here */}</MantineProvider>;
}
```
</details>

CSSのインポートは行わず、MantineProviderだけ追加しておく

```diff_tsx:src/main.tsx
- 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`で実施する
```diff_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でインポートを実施した
```json:package.json(一部抜粋)
{
  "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も変更しておく
```diff_javascript:postcss.config.js
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のButtonの表示など、いろいろ問題が起きる
そのため、ベースはMantineを使うのであればインポートせずに利用すれば良さそう??

この状態で、Mantineのコンポーネントを呼び出しても、問題は~~多分ない(**たぶん**)~~普通にあったww

:::note alert
`border`を使う場合、`border`単体だと表示されず、
`border-solid`とかも使わないと、うまく使えませんでした
他のCSSも使えない可能性があります
:::

## テスト(スクリーンショット付き)

```tsx:src/App.tsx
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;

```

スクリーンショット

![localhost_5173_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/37b09ecc-5504-6c0d-ceb2-85ba7bd74db2.png)

![localhost_5173_ (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/4fb680ac-0d0a-20e5-2810-0ae23d11ab8d.png)

でも、ウィンドウサイズが...笑

![スクリーンショット 2023-10-17 1.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/a91b0879-824b-dd6e-774a-68197d3c8da4.png)

## 最後に

なんかウィンドウのサイズがおかしいなとか、いろいろ問題はありそう...
`@tailwind base`に何が含まれているのかよくわからないままやってみましたが、ダメそう(´・ω・)
レイヤーの考え方を理解しつつ、頑張ればどうにかなるのでは？！と試しつつ記事を書いてみましたが、ボツ!