ITIDO

Usually, there are different ways to develop a software solution. We see opposing camps of proponents of one approach or the other taking shape. Creating stunning visual interfaces for the web is no exception to this pattern. For example, while some developers are horrified by the idea of mixing HTML and CSS in the same file, many others find it practical.

In this blog post, we shed some light on Tailwind CSS, a framework for writing with CSS. It actually bets on having HTML and CSS interwoven in one place. Vanya Kuneva, senior front-end engineer at ITIDO, shares about her experience as well as the advantages and disadvantages of working with Tailwind.

The framework in a nutshell

Tailwind is a CSS framework allowing the use of classes “that can be composed to build any design, directly in your markup”, its official website states. In contrast with frameworks like Material UI and Bootstrap that come with ready-made components, Tailwind allows for customization of every component. This is possible because Tailwind bets on low-level classes, explains Vanya, the ITIDO front-end engineer. This is why Tailwind is dubbed utility-first CSS or a modern way of thinking about CSS.

The basic idea is that classes can be recorded straight into the HTML file. Moreover, the setup allows for multiple properties to be combined. Since this framework’s files are normally small-size, Tailwind is known as the fastest utility-first CSS framework. Files can be used for styling entire projects, shares Vanya. She uses Tailwind on a daily basis in her work on web products for a US scale-up. In general, other notable websites developed with this framework include those of Meetup and NASA’s Jet Propulsion Laboratory.

Unlike other technologies, Tailwind was created by an individual – the developer and entrepreneur Adam Wathan, and not by a company or an organization. It was first released in 2019 and its most recent stable version is 3.1.8. As of August 2022, more than 260 thousand developers around the world use the framework.

The pros and cons

Tailwind always elicits a reaction from the dev community. A lot of people love it … and a lot of people hate it. Let’s dive deeper and learn why. On the positive side, if one is just entering the front-end field, some experts say that he or she can jump-start this new career straight with Tailwind CSS. Its guides and documentation are easy-to-use and intuitive.

The framework is often applied in responsive visual designs. Vanya reminds us that when the application is expected to work on different screen sizes, developers should not forget to set different styles for the specific breakpoints. In Vanya’s opinion, Tailwind is the go-to choice for CSS when customers seek pixel-perfect visuals even on old, small-screen devices.

Tailwind allows for deleting or modifying certain components without altering other components and features. “We don’t use selectors in Tailwind CSS. When we have to change or delete a specific element , the rest of the code is not affected”, stresses Vаnya. This saves time when UX/UI visuals are changed on the fly.

So why then do some people resent Tailwind? Mixing of styling with markup is one obvious explanation. Files aren’t readable. This is a no-go for some. Moreover, the lack of predefined components is seen as a drawback rather than something positive. Last but not least, the future of Tailwind is in the hands of one person and his team. There is no big corporation behind the curtain.

Despite the available documentation, it really takes time to master Tailwind. However, as the old saying goes, there is more than one way to skin a cat. For instance, some colleagues would stick with Bootstrap for their front-end work.

Sharing know-how, part of ITIDO’s DNA

Every month during an informal team meeting, one of our staff members at ITIDO shares their knowledge in software architecture, programming, testing, or other related IT fields. It is usually in the form of a presentation during a friendly lunch with pizza and beer.

Presenting Tailwind under the slogan “Next Level Play”, Vanya was recently one of the speakers that ignited the interest of the audience, particularly among junior colleagues. While answering questions from attendees, she did a short demo by styling frequently used elements with the framework.

Ever since the ITIDO’s early days, knowledge sharing and peer-to-peer lectures have been part of our organizational culture. In-house engineers have held talks on topics like JavaScript, React Native, design patterns in Java and git for version control – all were praised by our hungry for knowledge colleagues.