I recently started to use Tailwind CSS, and I'm by no means an expert at it. But I thought I'd give a quick overview of it, how easy I found it to integrate into my project, and whether or not I'd use it in future projects. If you're thinking of using Tailwind CSS in your project hopefully you will find this helpful.
Why did I decide to try Tailwind CSS
Tailwind has fast become one of the more popular CSS frameworks with developers. Because of the freedom it offers and the fast styling process, there is no surprise there. First released in 2019, Tailwind CSS has amassed an impressive following with over 250k sites currently using it live at the time of writing. This makes Tailwind one of the most popular CSS frameworks on the market. With all that I wanted to give it a go in one of my recent projects, and I'm glad I did.
Advantages
Pro no. 1: Styling Control
It is one of the few frameworks out there that is not opinionated on how you style your projects. Developers have control over the look and feel of their projects. For example, the same elements can be used but different colour pallets, sizes etc can be applied.
By not having a default styling a huge amount of control is given to the developers to dictate how they would like the elements to be displayed.
Pro no. 2: Faster Styling
Tailwind really comes into its own when assessing speed. HTML elements directly using the vast class library Tailwind offers. Developers do not need to create designs and classes from scratch and can get a good-looking website or app up and running in a matter of minutes or less.
CSS rules do not have to be written from scratch but can be extended to add additional customisation. This class library and the speed it provides developers to get up and running is one of the main reasons why Tailwind has become so popular.
Also, the pre-built classes also provide responsive design right out of the box, and that is essential in any modern website so that is a huge plus.
Pro no 3: Security
Finally, Tailwind CSS has proved to be a very reliable and stable framework since its release in 2019. It has only gone from strength to strength and with its popularity only going up it's looking like this will only get better with time. Bugs and breaks are rare and seem to be resolved quickly. That's always a positive when looking to use a new tool in your application.
Disadvantage
Dis no 1: Mixing of HTML and CSS
While not having to worry about creating separate CSS classes and files is an advantage, this can also be seen as a negative. Having all the styling and HTML lumped into one file breaks one of the main rules of software development - separation of concerns.
Having to add all the pre-existing classes needed to your HTML file can look quite ugly, especially if you are repeating a lot of components. It can also be difficult to make adjustments in the future as it might need you to go through a lot of classes and re-familiarise yourself with what each one does.
Dis no 2: Learning the classes
Following on from the point above, it does take some time to get familiar and comfortable with the classes available and the ones that you would like to use in your project. Even for experienced developers, knowing how to fully utilize the pre-built class library can be a challenge. But once you have the hang of it its utility increases, so in the long run, this might not be a problem for you.
##Dis no 3: Common components
Many developers are you to Bootstrap and the pre-built component styling that it provides. Bulma is very similar in this respect. However, you do lack this with Tailwind. Developers need to manually add and compile together styles that will generate the look and feel they would like for components like headers, buttons, nav bars etc.
Again this might not be a major stumbling block for many, especially experienced devs that are comfortable with CSS.
Would I recommend Tailwind CSS
In short, yes. If you haven't used it before I would say at least get yourself somewhat familiar with it and what it can offer. More and more companies are using it and having it as one of your tools can only help.
Aside from that, it all depends on your preferences. If you don't mind putting in some upfront time getting to know the available class library then this is definitely a tool for you as it will speed up your development process, it's lightweight and once you know what's available you can spin up great-looking sites and apps quickly.
If however, you want more customisation and don't like having many classes mentioned in your HTML files then I would say avoid Tailwind.
As for me, I'm going to be using it for my personal projects because I've found it quite useful so far as easy to set up.
Hopefully, you found this article helpful. If you've used Tailwind CSS before please do let me know if the comments below how you found using it and if would you recommend it to others.
Until next time 🙋♂️.