Tailwind is actually pretty freakin’ cool

When I first heard about Tailwind I was like “Really? Modular CSS? That sounds so dumb.” Well.. I’ve used Tailwind to rewrite a personal admin portal, as well as the website you’re reading this on. Turns out I actually really like it.

What’s to like

It’s like writing CSS, without actually having to write CSS. I will admit, the class names take while to get used to, and I definitely have had to Google quite a few. However, once you get into a rhythm, it isn’t so bad. At the same time, you know you are keeping your CSS DRY since Tailwind will only compile the styles from the classes you’ve used.

DRY CSS

You know what’s a lot harder than people let on? Keeping CSS DRY. It’s freakin’ hard, man. It’s especially hard on projects with multiple people. If you aren’t using some sort of CSS framework, everyone has their own idea of how to write classes, especially global ones. I’ve left tons of comments on PRs at my current job where other developers have created a class when a global one exists.

Honestly, it’s not even their fault; if you don’t know, or forget, a class exists, then you end up writing repetitive code. Tailwind takes the guessing game out of it. It doesn’t matter how many developers are working on a site, you know the compiled CSS will be the minimal amount needed.

Sweet default colors

If you are like me and aren’t great at coming up with colors, then you will also enjoy the fun variety of colors that Tailwind offers by default. They have a fantastic selection, and each one comes in every shade available. For me, that’s amazing; instead of messing with hex codes, I can just use different shades.

Yeah, you shouldn’t just rely on the default colors, but they are still helpful. Take this site for example, I use a lot of the default colors, and then override some with colors that I feel are better (blue-500, for example).

The default colors provide a starting point and, for the less design inclined like myself, that’s huge.

Dev Environment

I only want to touch briefly on this, but the development environment for Tailwind has been super simple for me. I’ve set it up in React, Nuxt and Vite projects. Each time, it’s been simple and the docs have been super clear on how to go about things.

Downsides?

For one? I mean, it’s another framework that you have to add to your development cycle and you, or your team, have to learn. But.. that’s any sort of framework, right?

Component-based

Tailwind, in my opinion, is best when you are using a framework that is component based. If you are building an application in React, Angular, Vue, etc., then you can break down elements to a point where you don’t have to re-write your Tailwind classes.

For example, a text link. You have your first text link and you style it up like you want with Tailwind. That’s great, but what about the second, third, fourth, etc.? If you are having to put classes on every single text link on your site, that introduces a margin of error. The solution? If that text link is a component, you only write it once.

A lot of websites nowadays are using a JavaScript framework, so it’s no worries. However, if you are a go getter and going vanilla.. Tailwind may be challenging. This site is vanilla, but luckily WordPress has a built-in get_template_part() function that makes it easy to “component-tize”.

Conclusion

I think Tailwind is awesome and I’m definitely going to use it going forward. It makes it easy to spin up a website. The class names are intuitive, and the VS Code autocomplete is super helpful. It can be very useful if you are using a component-based environment, but I can see how it can be repetitive if you are going vanilla (if you are, hell yeah! We need more vanilla JS these days).

You know where I’m going with this, right? If you don’t know, try it. If you like it, use it. If you don’t, don’t use it! That’s the beauty of all the different website tech stacks.

I hope you enjoyed my rambling, have a wonderful day.