I use tailwind with Angular, and we solve this with using [ngClass] to add/remove the class. You could do something similar with plain JS as well, and I imagine in most frameworks. Although yes, that is annoying to have to deal with.
Say you’re balancing a bunch of colours where it’s say mostly black, but you need to change to green in some case and red in others.
In css this is easy because you can say “for this situation I want this colour”. And you can order your rules in a sensible way so the more specific cases trump the general ones.
In tailwind you can’t do that because “text-red text-black” etc is ordered by the order in which the utility classes are added to the page. So you have to make sure you don’t add two conflicting classes.
That case doesn’t seem so bad, but once you get a few different properties to control and a few different scenarios, it gets pretty messy.
aidos|4 years ago
Say you’re balancing a bunch of colours where it’s say mostly black, but you need to change to green in some case and red in others.
In css this is easy because you can say “for this situation I want this colour”. And you can order your rules in a sensible way so the more specific cases trump the general ones.
In tailwind you can’t do that because “text-red text-black” etc is ordered by the order in which the utility classes are added to the page. So you have to make sure you don’t add two conflicting classes.
That case doesn’t seem so bad, but once you get a few different properties to control and a few different scenarios, it gets pretty messy.