First experiences with Tailwind

This week I decided to jump on the Tailwind bandwagon. I have dabbled with it in the past, but I never did a systematic approach.

Tutorials I did

I decided to do a full-on tutorial, and it was a good decision. I started with Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours from @yesdavidgray. It was a great experience. I finally grokked the vscode html snippets (div#id.className1.className2) and got a feel of which classes do I need. Margin, padding and bg-color-* indicators became so much less scary!

The tutorial also featured topics such as custom classes and using react-icons library. Seems easier than downloading individual .svg files and then putting them into a React component!

I love tailwind, most is how it handles hover: and dark:. These are great Quality of Development improvements. I got tired of having to do React Context for that.

The only major drawback of tailwind - the verbose class lines - is alleviated through a great library recommended there - [vscode-inline-fold] (https://github.com/moalamri/vscode-inline-fold) by @malamri32.

Then I did Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated Navbar from @fireship_dev.

Road ahead

I'm using Tailwind extensively in the portfolio I'm working on now. I see it as a central site where not only images from my previous work exist, but also as a playground for me to test ideas and showcase what I'm working on currently. Ideally in a few clicks any visitor can see a working demo.

I feel my work in the repo gave me a good foundations to buidl on. Tailwind is here to stay in my dev toolset.