(Photo by Cameron Venti on Unsplash)

About six months ago I first heard of tailwindcss. I looked at their website, but I was opposed when I saw all those classnames in the code. I didn't touch it back then.

A few months passed and I started seeing more and more tailwindcss mentions im my feeds. At some point I was intrigued enough to finally try it out.

The Struggle

I never used a CSS utility library before. My main workflow was scoped CSS using styled-components.

My first steps using tailwind were a struggle. I had to constantly lookup classnames in the documentation. Always asking myself whether this is really that much better than just writing the CSS myself.

The documentation is quite good though. The struggle of always looking up the classnames was eased that way. If the documentation was just a bit worse... I think I'd have switched back to styled-components.

The Realisation

Then, I started looking up classnames less and less. Especially after I found that there's a neat VSCode extension: Tailwind IntelliSense. I realized that I actually learned the basics of tailwind quite fast. It was just that comfortable feeling of using what you already know, which tried to nudge me back to writing my own CSS.

I soon split bigger components into smaller ones, like I usually would in my React applications. That's when I realized that tailwind is often less code than writing your own CSS. It's also scoped by nature... it's just classes.

Finally, I wanted to use my own color scheme and font. This is easily possible using a config file. That's when I realized that I was already creating beautiful UIs, without customizing anything. No need to think about defining good scales of font sizes, margins, break points etc. Very good defaults are already chosen for you. Just try multiple variations & pick the one that looks best.

The (Hidden) Benefits

No need to worry about naming conventions. Just hack pre-defined utility classnames into your keyboard to create beautiful UIs with ease. Everybody who is familiar with tailwind can work with it without any ramp-up time.

You only bundle what you use. As long as you don't deviate from tailwind's recommendation, any unused classes won't make it into the bundle.

Write less. Almost always, the utility classnames are shorter than the style they implement. Just use the classes grid grid-cols-3 gap-4 in you HTML. Instead of defining a class that implements its styles: .my-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }, and then using that class my-grid in your HTML.

Know what's what. Previously, when I was writing my own CSS, I had to look at the implementation of a CSS class to know what it's doing. Now, you see the tailwind utility class and immediately know what it is there for.

Build responsive fast. Just look at the animation on tailwind's front page. Seriously, go there and watch it for 30 seconds. Building responsiveness into your UIs is super fast with tailwind.

Is It For You?

If you're anything like me, you know your CSS but are no CSS artist, then it is definitely for you.

Try it out! If you don't know on what, check out Frontendmentor's challenges. Then please let me know your thoughts.

Last but not least, it's not the only thing you'll ever use. You'll still write your own styles sometimes, especially if you need to pixel-perfectly implement a design. Using a mix of tailwindcss and styled-components/sass/less/css/whatever is actually fine! In fact, that's how you'd introduce it into an existing project: Alongside the tools you already use.

What do I think now, after my initial hesitation? Well I think it really is like tailwind... it pushes you forward, whether you realize it or not.