React で各種コンポーネントライブラリと Tailwind CSS を共存させる比較

ベーススタイルを持っているようなコンポーネントライブラリが、Tailwind CSS と同時に使えるのか調査。

爆速で開発したいのでスタイリングもライブラリのあり物を使いたいが、
自身でスタイリングしたくなった時には Tailwind CSS でやりたい

みたいな時のため。

Mantine
https://mantine.dev/

Taiilwindのベースのスタイルがコンポーネントのスタイルを邪魔してしまうので、

tailwind.config.js で preflight を false にするか @tailwind base; を global.css から削除する必要がある

Tailwind CSS の使い方自体は className に渡すだけで簡単

<Button className="ml-10 bg-gray-600 hover:bg-pink-300">

Chakra UI

https://chakra-ui.com/

無理そう？

sx Props または Theme をいじるしかカスタマイズの方法がないのでパッと見無理そうだった
className を渡しても Chakra UI のスタイルが勝利した

Color が、吐き出されるCSSの順番的にChakra UIの方が優先されてしまうだけだった。
マージンとかは Tailwind も使える。

まあ共存 NG 扱いで良いと思う　（が、細かいとこで言ったら Mantine も共存できない部分はありそうかもと思った）

Ant Design

https://ant.design/

（余談: 個人的デザインが好みのやつ）

Mantine と一緒で、

tailwind.config.js で preflight を false にするか @tailwind base; を global.css から削除する必要がある

これをやれば問題なく使えそう。（普通そうだよね）

// primary より className が勝ちます
<Button type="primary" className="bg-gray-300 hover:bg-pink-300">
  PRESS ME
</Button>

自分が目ぼしいと思ったのはこれくらいなので終了