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

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.