My thoughts on Tailwind CSS + a bunch of resources

After a couple of weeks playing with TailwindCSS as a relative newbie, I feel like I have banged my head enough to have some thoughts to say about it.

First of all, let me say I like it a lot, it removes all the headache with naming classes and class/id selectors, plus keeping my .css files tidy and organized was one of the areas I felt I could really improve, tailwind solves that with its utility-first atomic classes. But it also has some serious drawbacks you should consider before using it in your projects.

Here are my Pros and Cons:

Pros

  • Write inline styling without writting a single line of CSS
  • Build responsive interfaces super fast
  • No headaches naming classes
  • No more having to worry about changes to one element affecting another related element

Cons

  • Adding extra classes is easy but defeats the purpose of ease of use of tailwind
  • Typography and text styling is very limited
  • Shadows are very limited (modern UI's have a lot of glows/shadows)
  • Many plugins are confusing to set up, and lack documentation. I found myself needing to customize some stuff that needed a few tailwind plugins and it was not worth the trouble the hours I lost trying to get them to work.
  • Community doesn't seem mature enough yet (no widespread adoption which means sometimes u have trouble finding answers to your problems)

Useful Resources

  • Official Documentation - Because there's rarely anything better than reading the original docs
  • TailWind Cheat Sheet - Saves you a lot of time of reading the documentation when you start to get the hang of it
  • Intellisense for VSCode - the best vscode plugin if you use tailwind
  • TailZilla - repository of tailwind styled components
  • TailwindComponents - another repository of tailwind styled components
  • TailBlocks - ready-made tailwind blocks
  • MerakiUI - a responsive component pack with RTL language support
  • lofiui - a modern looking component pack
  • Tailwind Starter Kit - 120 fully coded tailwind components for react, vue and angular
  • GustUI - 50+ React and HTML modern looking tailwind components
  • Tailanimista - Create popular CSS Animations from animista in Tailwind
  • Treact - Modern ReactJS UI components built with TailwindCSS
  • kutty - Another set of pre build modern tailwind components

My component

Also while we're here, I created a simple Tailwind component, it's a Project Card which you can see below in action, to show-off your programming projects, I was intending on using it on my portfolio, but I'm not completely satisfied with it because of some limitations I can only get around with custom CSS. Either way, you might enjoy it, feel free to download and use it here

ezgif-5-d682a25662ee.gif

Closing thoughts

TailWind is a lot of fun to use, it definitely accelerates the styling process for your web apps and avoids a lot of headaches, but when you deep dive in it you notice it lacks a whole bunch of things you took for granted with CSS.

I like to style my UI's completely to my liking and actually enjoy the process of tweaking minor things, and with tailwind, I found myself sometimes having to settle for something that I didn't enjoy entirely.

Regardless, you should weight what your project demands, if you just want to build something that works with little time and a nice responsive layout, definitely try it out! Otherwise, nothing beats good ol' CSS.

No Comments Yet