Open spacecat opened 1 month ago
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
@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.
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 addw-40
it gets overridden but the react-toastify CSS.I also tried this:
and this is also getting overridden.
Can some please explain what the absolute easiest way to use react-toastify with TailwindCSS is?