はじめに

C2Cマーケットプレイスを開発していたとき、UIライブラリとして Chakra UI を使いつつ、細かいレイアウトは Tailwind CSS で仕上げよう！という作戦を立てました。

ところが実装してみると「Tailwind のクラスが効かない!?」という謎現象に直面…。
初心者さんでもハマりやすいポイントだと思うので、実際に試したこと・解決した方法をまとめます。

トラブル発生

例えばこんなコードを書いたときです。

<ChakraProvider value={defaultSystem}>
  <div className="mx-2 p-4 text-4xl">テキスト</div>
</ChakraProvider>

期待するのは「余白あり」「大きめフォント」な表示。
ところが実際は… margin / padding / text-size が無視 されて全然効かない。

一瞬「Tailwindの設定ミスか？」と思ったのですが、違いました。

なぜ起きたのか？

結論から言うと CSSレイヤーの優先度 が原因でした。

Tailwind: @layer theme, base, components, utilities
Chakra: @layer reset, base, tokens, recipes

Chakra の reset が強力すぎて、Tailwind のユーティリティクラスを上書きしてしまっていたんです。
つまり、両者が「どっちが先に効くか」でケンカしていた状態。

解決方法

1. Chakra のリセットをオフにする

一番シンプルな方法です。

<ChakraProvider resetCSS={false} theme={defaultSystem}>
  <div className="mx-2 p-4 text-4xl">これで効く！</div>
</ChakraProvider>

Chakra の resetCSS を切ることで、Tailwind のクラスが正常に反映されます。

2. Emotion Cache を先に読み込む

Chakra は Emotion をベースにしているので、CacheProvider を調整して「読み込み順序」を制御します。

import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'

const chakraCache = createCache({ key: 'chakra', prepend: true })

export default function Root() {
  return (
    <CacheProvider value={chakraCache}>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </CacheProvider>
  )
}

prepend: true で Chakra の CSS を先に流し、Tailwind を優先させます。

3. Provider を分けて使う

Tailwind を全体に使いつつ、Chakra コンポーネントだけ Provider でラップする方法もアリです。

<div className="mx-2 p-4 text-4xl">TailwindでOK</div>

<ChakraProvider theme={defaultSystem}>
  <Button colorScheme="teal">Chakraのボタン</Button>
</ChakraProvider>

これなら「両方のいいとこ取り」ができます。

学んだこと

Chakra と Tailwind は設計思想が違う → 併用するときは リセット周りに要注意。
どちらを「軸」にするか決めておくと管理が楽。
個人的には Tailwind ベース + Chakraは部品だけ が一番スッキリしました。

おわりに

もし「Tailwind と Chakra を併用したい」と思っている方は、ぜひ今回の方法を試してみてください。
快適な UI 開発ライフを 🙌