The answer, my friend, is blowin' in the Tailwind

Too long to read

• Writing CSS is simple, writing good and CSS is difficult
• Try to learn CSS properly before using a framework
• Using Tailwind saves time and solves several problems I’ve had in recent years
• I will continue to use Tailwind indefinitely

Writing CSS is simple, writing good CSS is difficult, to write maintainable CSS is even harder. Through the years I’ve tried several different approaches of writing, maintaining and scaling CSS with varying success. Here’s a trip down my memory lane.

The wild west era - 2010-2016

My approach to CSS? No approach really. I styled whatever was available (id:s/classes) to style in my main.css file. Naming conventions? As long as I had some sort of idea what I was styling, that was good enough. Needless to say, my CSS became a mess.

Later in this era, around 2012-2014, I started using CSS frameworks such as Bootstrap and Foundation. Foundation was my framework of choice. Using it made it easier for me to accomplish things I wasn’t capable of on my own at this point.

Positives and negatives of using frameworks

This has already been said by thousands of people before me, so let’s keep it short.

Positives

• Helps you to get going fast
• Well tested, cross browser compatible
• Solid grid systems
• Thorough documentation to lean on
• Accessibility taken into account

Negatives

• You may not get a complete understanding of CSS
• Debugging and overwriting framework styles
• Frameworks semantics vs preferred semantics (naming etc)
• Lot’s of unused CSS

I’m glad I’ve used these types of frameworks, I have benefited from doing so, but I didn’t gain the knowledge I needed to prepare me for what was coming.

The reality era - 2016-2019

In 2016 I graduated from school, applied for jobs and eventually got one a few months later.

Early on, I realised I didn’t know CSS as well as I thought I did. I arrived at a company where custom CSS was more or less standard, while frameworks had solved most of my CSS so far. I learned a lot about methodologies, naming conventions and CSS in general during those first months.

Through the years we’ve mainly used CSS frameworks to take advantage of the grid system, leaving out all other parts of the framework. We’ve used the BEM naming convention and our CSS structure was inspired by Kitty Giraudel’s Sass Guidelines.

One annoying thing when combining frameworks with BEM is the mix of naming conventions in the HTML. Another thing is the daunting and time consuming task to come up with decent class names for all components and HTML elements.

My first experience with utility classes

While working on a large scale component based project, we had the need to tweak spacings between components depending on context. Shortly after, I read about utility classes for the first time. After that, we generated hundreds of responsive utility classes for margin and padding. While we managed to get spacings correct, a lot of the classes were left unused, but still present in our production stylesheets.

Building my own framework

At some point, maybe at the end of 2018 or start of 2019, I decided I wanted to move away from CSS frameworks entirely. I read about ITCSS, Harry Roberts’s (aka CSS Wizardry) methodology for writing sane, manageable and scalable CSS. I started to study Bootstrap and Foundation in detail to try to understand how they were built. I looked at other CSS setups and picked up bits and pieces I liked. Around this time, my colleague mentioned a new thing called Tailwind CSS, a utility-first framework. I had a look but quickly decided I was not interested. I had just fallen in love with BEM and was hooked on ITCSS. So instead I built a custom framework with a solid grid system, handy utility classes and beautifully named and structured SCSS and HTML, figuring this was what we were going to use the following years. It was never used, the reason being that we didn’t start any new projects by then. I’m glad for that now.

The new era - 2020

The large scale web project me and my colleagues had been working on for almost three years began to come to an end. We realised that another way of writing CSS would have been more convenient. We had lots of unused CSS, mixed naming conventions and huge amounts of custom CSS to maintain - Tailwind CSS was mentioned once again.

As I began to develop this portfolio during spring/early summer 2020, I decided to give Tailwind an honest try. Tailwind felt odd and “wrong” in the beginning. My HTML felt bloated compared to the BEM classes I had used before. After a while though, I realised how smooth my workflow was. I only moved between my HTML and my Tailwind config file, occasionally writing a few lines of CSS that Tailwind didn’t already have classes for.

Of course, it takes a while to get used to all the classes in the HTML if you’re used to BEM. It takes a while to memorise what class does what, but Tailwind’s epic documentation makes it easy to find what you’re looking for. Those few occasions when you have to go to there takes less time than creating a new CSS/Sass file, importing it correctly and then write your own custom styles, a massive win according to me. We don’t even have to come up with convenient names for our classes, we just combine them until our elements look like we want them to.

Another huge advantage is that Tailwind comes with Purge CSS, it removes all unused CSS - a huge performance challenge with CSS is taken care of right away.

Also, since almost no additional CSS is needed, a structure or methodology for structuring our CSS files becomes redundant.

I will continue to use Tailwind indefinitely

To sum up, I'm not sure your CSS journey should begin with Tailwind, rather end with it. Once you know have a decent understanding of CSS, Tailwind is the perfect toolkit for writing, maintaining and manage CSS. Of the different approaches and methodologies I’ve tried throughout the years, Tailwind definitely feels most convenient so far. Tailwind solves a lot of the problems we’ve had for many years, and most importantly it saves us a lot of time.

Some say Tailwind sites, like Bootstrap sites, are immediately recognisable. That may be true in some sense, but only if you just use it as it is. My experience is that Tailwind is incredibly easy to extend and customise to be able to build just about anything.