tldr;
I recently led a workshop on Angular and Tailwind for ng-conf 2021. The purpose was to introduce Angular developers to Tailwind, including how to implement it in your app and how to use Tailwind. A couple weeks after the event an attendee reached out with a couple questions and I decided to write an article about it. Hopefully this will be helpful to others that are using Tailwind in enterprise apps, or really any size apps.
The questions were:
- What are the big differences between Bootstrap and Tailwind
- My thoughts on the amount of CSS in templates with Tailwind, and alternate solutions
I’ll tackle each of those to the best of my ability in this article.
Bootstrap vs. Tailwind
Okay, excuse the heading for this section. I hate “Technology X vs. Technology Y” articles. They’re the worst. So I’m not really going to do that in this article. Bootstrap is a great CSS framework and there’s a reason it’s been as popular as it has been for nearly a decade. It provides an easy way for those who don’t have much design skill to end with a decent looking application. However, there are some minor downsides to Bootstrap. One thing is that Bootstrap sites tend to have a familiar look and feel. You can usually go to a site and tell that it’s been built using Bootstrap. Another downside is that Bootstrap has specific classes for particular components that you have to remember for each of those components. For example, if you want to put a card on the page, here’s the HTML and classes:
**As you can see, there is a **.card class on the enclosing div, as well as .card-body, .card-title, and .card-text classes. What do these classes do exactly? I don’t know, except that they add some style to those particular elements. The style on those elements can’t really be reused elsewhere; for example if you want to use an .accordion. The .accordion classes are different than the .card classes, even if they result in similar output. Now, what does this mean for you as a developer? It means that memorizing the classes for your application is more difficult because there are different classes for every component, as well as all the utility classes that Bootstrap provides.
The final difficult part about Bootstrap, historically, has been that overwriting the default Bootstrap styles is nearly impossible. There are many !importants littered throughout the Bootstrap style files. In addition, the specificity on certain elements is deep. For example, it’s not uncommon to see a CSS rule like this:
**So not only is there a **!important, the rule is very specific. In the end, it’s hard to overwrite Bootstrap styles.
Now, Tailwind has similarities to Bootstrap in that it makes it easy for the average developer to produce a good looking application. It also uses utility classes like Bootstrap does, but it only uses utility classes. You won’t find card specific classes anywhere because the folks at Tailwind don’t know how you want your card to look. Each card you make can look different if you want. If you want three variants, make three variants. It’s completely up to you. This flexibility is refreshing. Nobody will come to your site and say, “This is a Tailwind site.” They will have no idea. The sky is the limit for how to design your site.
What’s With All the Classes?
The second question is another that I have received a few times, and that is, “How do you deal with all the classes littered throughout your HTML?” And honestly, it’s a good question. If you’ve never seen a sample of some HTML with CSS classes, here’s one for you:
There are a lot of classes mixed in there! And this is just a small example, a little over 10 lines of HTML. So, how do I deal with that? It’s simple: I just do. It took a little while, but I finally realized that having all the classes looks a little crazy when developing a page or component, but it really doesn’t matter. I can use all the utility classes provided by Tailwind, or write custom CSS. I can have long strings of classes, or long files of SCSS for each component or my app. I’ve decided that overall, it’s much easier to add a whole bunch of classes to my HTML rather than write the custom CSS.
**Now, there is somewhat of a middle ground. It does seem kind of crazy to apply a color and underline to every single **a tag in the app. Or, more complicated, apply the same classes over and over again to every button. How can we solve this problem? Let’s look at 3 ways:
#angular #tailwind #q&a #angular & tailwind
