search

apvarun / toastify-js

Pure JavaScript library for better notification messages
https://apvarun.github.io/toastify-js/
MIT License
2.09k stars 230 forks source link

Doesn't play well with TailwindCSS (or any other utility framework) #101

Closed gremo closed 2 years ago

gremo commented 2 years ago

... because of the style background: linear-gradient(135deg, #73a5ff, #5477f5) applied by default.

TailwindCSS uses the bg- utility class to change the background color. Passing the option className doesn't work of course, because of the background property:

toastify

This is annoying because most of the time the primary purpose is to change the background color. Is there a way to unset (maybe using some options) the background itself, and use my bg-green-500 class?

Shitric commented 2 years ago

I think you can unset the background property for default and set className to bg-green-500. Maybe i'm wrong but give a change :)

gremo commented 2 years ago

@Shitric thanks for helping, but unset wins:

Immagine 2022-05-16 161546

apvarun commented 2 years ago

Importing the toastify css file before the tailwind layers in your CSS file would change the specificity as per your need. Can you try it @gremo ?

gremo commented 2 years ago

@apvarun well that is not simple. I'm lazy loading the css needed by toastify-js... but I'll try it anyways!

gremo commented 2 years ago

Solved using important modifier this way: !bg-none !bg-cyan-500. But I still think there should better way. I'll close this for not polluting the issues.