Tailwind CSS… The new Bootstrap ?
If you’re a web-developer doing a lot of magic things using CSS, you might have heard of Tailwind CSS. A trendy and recently hyped CSS framework which has made its rise in popularity the last years among a lot of respected front-end developers. Is this the new way forward and will it dethrone Bootstrap as the new standard? Who knows… ?
Tailwind CSS; A utility-first CSS framework packed with classes like
flex,pt-4,text-centerandrotate-90that can be composed to build any design, directly in your markup.
CSS is hard. No one I’ve ever worked with had a seamless experience with CSS and neither have I. With this I don’t mean using CSS properties and knowing what a property specifically does. It’s finding the right way to use CSS in your app. Organising and maintaining CSS, let alone naming your classes, can be troublesome. For that a lot of people reach out to existing parties like Bootstrap to ‘style’ the application without too much worry.
Throughout the years of using a lot of libraries like Bootstrap, Bulma or even just custom made libraries, I’ve stumbled upon the article of one of Tailwind’s creators Adam Whatan;
In this article Adam explains his journey from the traditional ‘semantic’ approach to a more ‘composition’-like approach using utility classes. Classes like align-right or align-center are small and content-independent. Even Bulma and Bootstrap have added utility classes like flexbox, aligning, spacing, typography and coloring.
For many years Bootstrap was my go-to solution in building small applications and even in big enterprises it is still being used. After reading Adams’ and a lot of other related articles, it made me revise my own way of working using CSS. With the birth of Tailwind CSS, for me, it felt like time to pursue a more intuitive approach of creating applications.
Although Tailwind comes with a lot of features and customisation options to benefit developers, it sounds like the new way for me, but might not suit everyone. To clarify this let’s go over some pros and cons of Tailwind.
Advantages
Incredible fast prototyping process. With the use of small utility classes directly in HTML, the need of naming classes and constantly switching to a CSS file is no longer needed to implement a page design. This saves in development time and, due to its new JIT compiler, in build time as well.
Custom configuration. Tailwind comes with out-of-the-box values for most of the utilities like: spacing, colors and typography. Most of which are a bit opinionated, but sufficient enough. If these default values don’t seem fit for your design, you can update or add new values to the configuration to match your product brand.
Constrained values. I think this is adding the most value. I’ve seen several projects where a lot of custom CSS values were added to, for example, add spacing from 15px to 20px. This resulted in strange behaviour in the end. Maintaining such ranges of custom values can end up in a nightmare when no guidance is in place. With the naming and values from Tailwind configuration there is a naming and value convention which enforces developers to always work with the same values. Maintaining this would be as simple as updating/extending the configuration and it is enforced on all components dependent on that utility class.
Small bundle size. Purging unused classes is now default within Tailwind’s latest version. This enables the bundle size to reduce to the size of only used classes.
Solid community. Since the beginning of Tailwind there has been a solid developer community. Responsible for creating content, component libraries and provide a lot of in-depth explanation on using Tailwind with your favorite JavaScript (React, Angular, Vue) or PHP (Laravel) framework. Next to that there is a lot of activity from Tailwind Labs itself in regards to tutorials and developing a design system.
Trade-offs
A lot of classes in HTML. Due to the lack of default components like Bootstrap has, for example button, accordion, cards, writing HTML for a simple button will create a lot of bloat in your template;
Above you will see the amount of classes for this Tailwind banner fetched from https://play.tailwindcss.com/. Having all these classes can make you wonder if that is really beneficial above the Bootstrap variants with card or other components. Although Tailwind does not come with default components, developers are still free to create their own.
Learning curve. Tailwinds intention in creating a very thin abstraction on top of CSS makes it hard to use it without any basic knowledge of CSS and the usage of specific properties. Even when knowing most CSS properties, you still have to learn the predefined classes by Tailwind.
Opinionated ‘mindset’. Working with Tailwind might force you in working mostly utility driven and let go of all ‘semantics’ without adding value to creating your application.
Discussion
A valid topic I feel to cover in this article is the amount of discussions the ‘utility’-way of using CSS has been around. Particular on the topic of Tailwind. While diving into lots of arguments why using Tailwind would benefit me in my work, I stumbled upon loads of negative (although sometimes valid) points. Most of which I believe do not really relate to specific Tailwind but rather to using utility-classes in general. Please let me elaborate some of them;
‘It’s just inline styling’. Not completely true. Utility classes seem to do only one particular thing, but this might not alway be the case. Especially with extractions or component-based working. Although using a lot of classes representing a single value feels like rather using ‘style=…’, there are valid examples why it is not;
- Unlimited possibilities; There are endless possibilities if it comes down to values. the one thing can be 1px the other specifically 2px. As mentioned earlier, having to maintain that is not the nicest work.
- Responsiveness; There is no way to use media-queries with inline styling.
- Pseudo elements; Inline styling does not support the use of pseudo classes like hover, active and focus.
- Animations; Using keyframes for animation are not possible to do with writing inline styles.
‘Why not just write CSS for the html semantics’. You can still use semantic class names next to the utility classes by extracting classes into components with the ‘@apply’ function in Tailwind; Reusing Styles — Tailwind CSS. Just because Tailwind is pushing into the direction of ‘utility’-first, it is not ‘utility’-only. Developers using a lot of component libraries or JavaScript frameworks can still be free to work the way they’ve used to.
‘Now I have to learn a whole new set of CSS classes on top of CSS itself’. In software development, working with abstractions like an API to interact might be the best comparison with the usage of Tailwind. There are a lot of property abstraction bundles in tiny CSS classes, but the same goes for any other framework. Having semantic classes like .container or .card also represent an abstraction over specific properties. Any new member joining the team also has to be aware of what it does and when to use it.
‘Mixing styling with content’. Before my own view on this, I highly recommend reading Adam’s article mentioned in the top. Although I do believe that having design decisions solely in your HTML to be a bad practice, it is not an easy topic. I don’t think it should be narrowed down to be only a bad practice. Having an open mind and viewing other patterns in development will help you grow and find a way of working for you and your team. If we take a look at mobile development, may it be Apple, Android or cross-platform (Flutter or others) having design ‘modifiers’ next to markup is the default there.
As stated, there is a lot of discussion on the topic of utility-based CSS. Not only within Tailwind (as it is not the only one preferring this ‘mindset’), but also among other libraries used within the industry. If you’re curious to other interesting discussions please head down to the references.
Conclusion
Should you use Tailwind CSS for your next project? As with almost all decisions within engineering: it depends. It can be used as a useful tool, loved by many and hated by others, within the team you’re working on.
Is Tailwind the new Bootstrap? I do not think so. The way you’re working with a utility-first framework comes with a different approach rather than just using another theme or updating components within Bootstrap. If not for Tailwind, there are still other utility-based CSS frameworks trying to popularize ‘functional ’ CSS over ‘semantic ’ CSS.
I believe what matters is that you find the best fit for your project, may it be another Bootstrap version or Tailwind. Use what works for you and your team. If you feel like trying Tailwind CSS for your next project… Please head to the documentation to get started; https://tailwindcss.com/
