DEV Community

Guilherme Samuel
Guilherme Samuel

Posted on • Originally published at


Typescript + tailwind = typewind (first impressions)

This article is about my first impressions with the library, if you're looking to getting started typewind, read

I decided to try out this promising library by implementing it on their own website! I believe judging a tech without trying it can lead to huge misconceptions (just like everybody hated tailwind until they tried it). After finishing the refactoring I had some thoughts worth sharing it:


  • It embeds pretty much every tailwind positive point and at some important ones like productivity, it seems to come even better. The ability to just keep typing what utilities you want - dot after dot - seems ever smoother than tailwind classes.

  • Multiple utilities for the same variants (this feels good). Tailwind doesn't support this for very understandable reasons, but with typewind this is completely functional. See a comparison below

// tailwind
className="focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-100"

// typewind
Enter fullscreen mode Exit fullscreen mode
  • It actually will catch some mistakes that any tailwind plugin wouldn't be able to. By converting their website, I frequently got type errors because they were actually using nonexistent utilities (bg-black-500, offset-slate-50). This is important because it will ensure we're not messing up our styles. It's easy to not see a minor tweak like a light border not being applied.


  • On the same way that it increases tailwind positive points, it also worsen the negative ones. Readability is even poorer than the inline utilities because there's no space between each utility. Prettier also seems to make it worse by not "inlining" them:
Enter fullscreen mode Exit fullscreen mode
  • (At the time of writing) it lack of support for relevant features, like color opacity and the important modifier

  • A little bit unfair to say, since the library didn't reach a major release, but is not tested, prone to bugs and very probable that lacks support for a lot of features (we didn't try yet to discover).


Typewind has a lot of potential and I believe it will be successful if they figure out how to keep the advantages of Tailwind while minimizing the limitations of their approach (which use objects and properties instead of strings).

The crucial positive point for using this library in the future will be type safety. As I said on the pros, it's actually more common than we think to have nonexistent utilities being applied.

What is your opinion about it? Thanks for reading and see you next time :)

Top comments (5)

kavinvalli profile image
Kavin Desi Valli

Typewind supports both color opacity and the important modifier now! We've also added tests to make it less prone to bugs :)!

Sloan, the sloth mascot
Comment deleted
reacthunter0324 profile image
React Hunter

Good article.
It would be great if you have sample code links for typewind.
Thank you

kavinvalli profile image
Kavin Desi Valli

Hi! They're on the official Typewind website and also on this blog post which I've written!

Didn't really mean to self-promote here, sorry just felt would be a good resource to link.

kavinvalli profile image
Kavin Desi Valli

Thank you for putting this up! Love your impartial takes on Typewind.