My Thoughts on Tailwind

Published: ....
Last modified: ....

Share this post on Bluesky See discussion on Bluesky

For a while now I've been pretty dismissive of TailwindCSS, usually brushing it off as yet another BootstrapCSS alternative. However, I've started using it in several of my side projects and I think I've changed some of my opinions on it as a tool.

Background:

Before using Tailwind, I was using Vanilla Extract, and before that was using Styled Components. I pivoted from each tool to the next one because of other technical limitations. In the case of the change from Styled Components to Vanilla Extract it was because I wanted to move away from runtime styling solutions (partially to prepare for React Server Components).

The shift from Vanilla Extract to Tailwind was similar, but more of a developer experience reason rather than for user experience. The short gist is that using Vanilla Extract with a Next.js application is incredibly difficult to setup "correctly". Yes there is a Next.js "plugin", but that doesn't work at all with React Server Components within Next.js^{[1]Jump to footnote}. For Tailwind however, all I need to get it working is a tailwind.config.js file and Next does all the hard work for me!

Refined Thoughts:

After using Tailwind for a few weeks (both on my personal site here, as well as a few other side projects), I've been really enjoying it!

It's been nice not needing to worry about creating a separate file to maintain styles (e.g. a .css.ts file), or even maintain yet another build process during development as well!

There are stil some quirks with using Tailwind in my experience that I'd love to polish up a bit more:

Figuring out what class I need
Handling overrides / style composition

Figuring out what class I need

This might just be the initial learning curve of using Tailwind, but I feel like 99 times out of 100 I usually use the wrong align-items: center classname, and this happens with a number of other things also (e.g. colors, font-weight, etc).

Some things that have helped with this:

VS Code Tailwind extension
Search Tailwind Raycast extension
ChatGPT 🙃

Handling overrides / style composition

This one is a bit gnarly, and is really two issues:

Working with a component library that has already defined a classname that I want to override
Complex selectors (e.g. the "lobotomized owl selector")

I haven't found great solutions for either of these cases, for the second one I've been reaching for adding a custom class in my globals.css file and using @apply from Tailwind.

👆Back to reference See this long running issue trying to get it working within Next.js

My Thoughts on Tailwind

Background:

Refined Thoughts:

Figuring out what class I need

Handling overrides / style composition

Tags:

Related Posts

Web Development

CSS