What is TailwindCSS and why is it different to Bootstrap and BEM?

TailwindCSS is a utility-first CSS framework that lets you build custom design elements from a set of predefined classes. Unlike frameworks that came before it such as the popular Bootstrap, TailwindCSS does not come with a set of elements. Buttons, Headers, Navigations, etc are not included with TailwindCSS but the framework does promote building elements like these from the utility classes it supplies.

Before TailwindCSS developers would typically use SASS to build up their own utility classes or they would use naming conventions such as BEM. The main advantage of using BEM is that the elements you build can be reusable, so if you had built a block to use on the home page you could take that block and use it anywhere else on the site but allow it to be slightly modified in terms of color/content, etc. This would save the developer time but also makes the developer stick to a way of working that could be transferred to a larger team because they are all sticking to the same rules of development.

After a while of using BEM, you start to realize that everything has to follow a naming convention and this can eat away at the time that could be used for development. Having to name every element you are building, especially on larger-scale sites can become very time-consuming. As you build up a website with BEM over time you can find yourself battling over what becomes a new element or what is a modifier of an element. The loose definition of BEM forces the developer into making personal judgments on the code they are developing, and time spent on the visual aspects of the front end becomes secondary.

TailwindCSS takes the naming convention and decision-making out of the developer’s mind and focuses back on the design and UX of the website. TailwindCSS comes pre-packaged with useful utility classes for things such as padding, margin, font sizes, containers, colors allowing the developer to jump in quicker on the front-end development. The configuration easily allows for customization of spacing, font sizes, and colors to make sure that the design of the website easily incorporates a style guide or brand guidelines. In doing this TailwindCSS softly pushes a team of developers to incorporate a style guide and to make sure everyone is working in a standard way. One of the disadvantages of TailwindCSS in the early days was that the CSS file for all these classes become very large but with the inbuilt purge in the config file, TailwindCSS can now monitor what utility classes the developer uses and stripes away all unnecessary classes greatly reducing file size.

TailwindCSS isn’t without its drawbacks, however. The documentation on their official website is very good but you do have to learn all the classes it produces which can feel counterproductive at times. Most developers would have learned CSS properties and values over the course of their careers and now they have to relearn all of this in the classes TailwindCSS produces. It also doesn’t come prepacked with every single CSS property there is (that would be near impossible) so you do find yourself having to write some custom CSS when it comes to either building something very bespoke or a CSS property that has only been recently launched and hasn’t been added to TailwindCSS yet. However, the elephant in the room is the amount of HTML bloat that using CSS utility classes produces and this has become a sticking point in getting some developers on board with it. You can overcome this by using the @apply but if you were to use this on every element I think it would take the developer back to the BEM route.

The HTML bloat is something I can personally get over as I think the advantages of being able to build reusable elements quickly and align a large team of developers means that I will continue to use TailwindCSS, I think some of the disadvantages stem from a more broad aspect of CSS and how developers naturally use the language and I think TailwindCSS just pushes these long term issues into another area by creating the HTML bloat.