4 ms·
Another reason Bootstrap > Tailwind is consistency & context. Adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will l
by bensochar 7y ago
Another reason Bootstrap > Tailwind is consistency & context. Adding the class `alert alert-danger` to a div tells my coworkers that it's an "alert" & it will look like an alert everywhere. If I want to change how alerts look, I change the CSS
With Tailwind you'd have `bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative`. Then I'd have to change my HTML everywhere to update the appearance of alerts & its not always obvious that I'm looking at an alert in code.
- mkarnicki 7y ago> Then I'd have to change my HTML everywhere Nope. Once you see same (sub)set of classes repeated, you would instead define .alert and .alert-danger using Tailwind's @apply directive, and you now have a single place to change how your `alert alert-danger` looks :)
- amree 7y agoIsn't that like recreating bootstrap component again? It's just that this time it's not created by default at first
- Luc93 7y agoI'd imagine a reusable React component something like: <Alert type="danger"> Are you sure? </Alert> Of course this solution would work in other templating engines as well. The alternative would be extracting css components: .alert { @apply px-4 py-3 ... } .alert-danger { @apply bg-red-100 .. }