【React Toastify】Tailwind x Next.jsでスタイルが適応されない

はじめに

こんにちは

Tailwindを使用しているプロジェクトでreact-toastifyを導入した際、スタイルが適応されない現象が発生したので、解決策を共有します

環境

• next: 12.1.6 ("latest")
• react: 17.0.2
• tailwindcss 3.0.7

現象

react-toastifyを使ってtoastを作成しても、画面左上にただ文字が表示されるだけ
↓こんな感じ

解決策

tailwindが悪さしていると考え、Googleで調べているとreact-toastifyのgithubで同じ現象のissueを見つけました。

In my project, I made a new file toast.css and pasted styles from this path: node_modules/react-toastify/dist/ReactToastify.css.

とのことなので、<ToastContainer />をimportしているファイルにcssのimportを追加。

import 'react-toastify/dist/ReactToastify.css';

---

正しく表示されました！

Tips

Nextjsでページを移動してもToastを表示させたいときは_app.tsxにToastContainerを置くとできます

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <>
	    {/* こんな感じ */}
            <ToastContainer
                position='top-right'
                autoClose={3000}
                closeOnClick
                rtl={false}
                pauseOnFocusLoss
                draggable
                pauseOnHover
            />
            <Component {...pageProps} />
        </>
    )
}

参考

https://github.com/fkhadra/react-toastify/issues/202