The easiest way to use react-toastify with Tailwind CSS

[spacecat]

This is the only Tailwind CSS example I could find:

https://fkhadra.github.io/react-toastify/how-to-style/#css-classes-as-function

I tried adding tailwind utility classes to ToastContainer className but if I for example add w-40 it gets overridden but the react-toastify CSS.

I also tried this:

:root {
  --toastify-toast-background: #ff0000;
}

and this is also getting overridden.

Can some please explain what the absolute easiest way to use react-toastify with TailwindCSS is?

[cph101]

I am also encountering an issue with tailwind and this, although likely not the same. The root element is not getting anything rendered, and this occurs as soon as I import ToastContainer. Am using JSX, not TSX

[spacecat]

@cph101 I ended up doing this:

    .Toastify__toast {
      @apply bg-theme-card-background p-4 shadow-lg ring-1 ring-gray-200;
    }

    .Toastify__toast-body {
      @apply items-start text-theme-typography-paragraph;
    }

    .Toastify__progress-bar {
      @apply opacity-100;
    }

    .Toastify__progress-bar--success {
      @apply bg-theme-accent;
    }

    .Toastify__progress-bar--error {
      @apply bg-red-500;
    }

Also I copied the scss folder from node_modules and added it under styles/react-toastify. I needed this because I needed to override $rt-mobile: 'only screen and (max-width : 320px)' !default; in _variables.scss
You probably don't need to copy the scss folder.

Note that if you're going to copy the scss folder you will need to install sass as a package dependency using npm. Next.js docs can tell you more about how sass is integrated into Next.js. Just search for sass in their docs.