Next.js + Ant DesignでTailwind CSSを使うとボタンが透明になってしまう時の対処法

結論

tailwind.config.js

  corePlugins: { //追加
    preflight: false
  }

状況

• Next13

  • デフォルトでTailwind CSSを追加

• Ant DesignをDocsの通りに追加

  • https://ant.design/docs/react/use-with-next

pages/index.tsx

import Image from 'next/image'
import { Button } from 'antd'


export default function Home() {
  return (
      <>
          <h1>Hello World</h1>
          <div>
              <Button size="large" type="primary">
                  Button
              </Button>
          </div>
      </>
  );
}

このようにbuttonが透明になってしまう。

対処

tailwind.config.js

  plugins: [],
  corePlugins: { //追加
    preflight: false
  }
}

corePluginsの設定を追加。以下の動画でも解説されているようです。Tailwind CSSのスタイルリセットを使わないようにするらしい。
https://youtu.be/oG6XPy1t1KA

参考

https://stackoverflow.com/questions/71715157/tailwinds-ant-design-button-color-is-white-but-has-own-color-wnen-i-hover-it