Firstly let me preface my arguments by stating TailWind CSS is a tool for spinning up applications quickly, it gives the custom options of vanilla css while also being able to write less code. It’s light weight has a huge following, to help with debugging and solves the problem of having to write a seperate code base just for styles.

So with those excellent arguments in mind why don’t I use it ?

Before I tell you why I personally don’t use Tailwind. I want to go through three different scenarios from the perspective of a beginner, intermediate and senior developer and give reasons why for whatever level developer you are there is clear reasons not to use TailWind css.

Why Beginners shouldn’t use Tailwind css When I say beginner I mean someone with literally zero real world coding experience outside of the realm of tutorials and classes.

The most progress for beginners happens when they are inspired to create, of course everyone wants to land the job and get the repayment for their time and effort invested in learning to code. But progress and learning happens when inspiration and curiosity are at the most extreme. So with that in mind I would say learn component libraries, like bootstrap, material ui, chkara ui. These component libraries offer you visually attractive out of the box solutions for spinning up beautiful UI’s yes you lose a lot of the customisation that Tailwind offers but as a beginner that level of customisation isn’t necessary. The class names in Tailwind are actually just going to slow progress because it is essentially one more thing to learn before being able to create.

Why Intermediate Developers shouldn’t use Tailwind CSS As an intermediate level developer the emphasis should be on writing clean ‘debuggable’ (if that’s even a word) code. To write clean code a lot of planning is required, grouping attributes together in CSS classes is an important aspect of the design.

This brings into the broader CSS philosophical battle of utility classes vs component classes. Software design can be essentially broken down into 2 main features. Abstraction and utility, easy to use libraries of code provide the developer with the solution where they only need to change the components of the feature that are necessary. Too many customisable features and too much code to write it almost becomes a case of why use the library at all. Not enough features and then it may be that the library isn’t a suitable option. Component classes aim to provide a lot of abstraction, a simple “Hero” class might represent 10 or 20 different attributes verse a “Top-0” class which literally all it does is set the margin-top-0.

Why Senior Developers shouldn’t use Tailwind CSS Libraries such as Tailwind CSS lead to an unhealthy amount of technical debt, albeit they are light weight and if done right they don’t have to reduce performance, but they move us away from building reusable component libraries and into the realm of ship fast, ship first fix later.

Essentially every time we make a new component or feature any code which we cannot directly copy and paste we have to rewrite from scratch. These types of solutions are ideal for MVP’s and products that we want to ship to market but don’t need to maintain ourselves. It is not doing the long term planning on what will be the best for maintaining a project in the long term.

One more reason not to use Tailwind CSS I don’t use Tailwind css, my preference as a react developer is to use css modules or where I need a very granular connection to the state of my application I use css in JS. CSS modules is the best approach in that you are only delivering to the client the amount of code that needs to be, so performance it is the best, following the philosophy client relationship with application is on a “need to load” basis. The hashing of the class names allows a fine control of the inheritance properties and for debugging having smaller style sheets is more convenient.

Let’s take a look at what we can do with that fine level of control between our state and styles.