20-08-22

Opinions about TailwindCSS.

I’ve never been one to have strong opinions one way or the other towards tailwind. Previously when I needed to use Bootstrap on an existing project I enjoyed the rapid speed of throwing in some utility classes and having 70% of the layout/styling already there. Just put down “d-flex flex-column flex-md-row” and you have a quick versatile responsive layout that works for most applications.

However on the flip side; writing your markup all at once and then jumping in a stylesheet and just writing all your styles at once feels great. I really enjoy that “traditional” workflow and organisation of code. “Seperation of concerns” if you will. No looking back at your HTML to check you didn’t already add display: flex as a utility class.

First experiences

I’ve used Tailwind in the past briefly on tiny projects to try it out and see if I could replicate that glorious rapid prototyping speed. But the scope of these small projects was so small and often only had little styling it never really allowed me to explore beyond the very basics.

On larger projects I always felt Tailwind would be of great help to be able to get this project styled really fast but right now I’d have to spend 20+ mins in the docs figuring out a custom config and ensuring everything is setup. Then once I actually start writing HTML looking up all the different names for each utility class (letter-spacing? line-height? border-radius?).

Styled-components variation nightmare

I’ve had a specific Next.js project sitting there for over nine months now about 70% complete for an MVP. That project is using styled-components. Now I’ve typically reached for styled-components as my styling solution for large react apps as the experience of writing your styles in TypeScript with access to props can really be a fantastic tool to have access too.

However initially when I built this project I setup a lot of components with endless amounts of props just to control styling and give extensive flexibility. This was a mistake. I basically created a bastardised version of styled-system, which I could have just used from the get-go and had a much better experience.

This messy system I created has landed me in a spot to continue going with this project and refactor into a cleaner soluton as I go. Or start again (only a little more than a days work to get back to the same spot).

I chose to start again. With TailwindCSS.

Starting again sounded frustrating but also a great opportunity at the same time. An opportunity to try something new and moreso something that could help me be faster to get back to the same spot. And to spoil the ending, it has been fantastic.

At first I was a little frustrated being so slow having to look up how what the line-height property was or how to adjust my “rounded” border-radius defaults. And I won’t lie, the ridiculously long class list can take a bit of time getting used too. It completely threw me off when trying to find where I am in a larger HTML/JSX file. Particularly as I started by just writing all my markup in one file before extracting out specific components. When everything’s a div with a million classes and no semantic names you get lost pretty quick.

However now I’ve settled in so to speak, it does feel that great developer experience and rapid prototyping that was promised is really real.

There’s something really incredible about writing your markup while at the same time your styles taking shape all at once.

So I am very much enjoying the Tailwind experience so far. We will see if it’s something I now reach for on most projects as a starting point. Because I am starting to feel that’s where I’ll end up.