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]. 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.