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

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

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

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

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

Project作成

今回は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をセットアップ

tailwind.config.js

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

CSSファイルを作成する

src/style.css

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

CSSを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のガイドを見つつ、適宜変更していく

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

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

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

bun add --dev postcss-import

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

公式の手順

// 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>;
}

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

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で実施する

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でインポートを実施した

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も変更しておく

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

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

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

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;

スクリーンショット

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

最後に

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