How TailwindCSS made me a better developer

When I started programming, I remember that I made my first website on Laravel and I realized that CSS was hard. At that time, I didn't know anything about Angular or ReactJS (VueJS wasn't created yet), and in 4 months a had to build a website for a company.

We didn't make any design, we just got started on coding (and learning about Laravel), and we took a template form the Internet with some components. Responsive design was really tough. Now that I see that design, I hate it, but it was my first test in web development!

When TailwindCSS came out, I was really excited, utility-first framework? what was that? Then, I read Utility-First.

So, I gave it a try. At first, it took me some time to remove the Bootstrap "pre-built components" from my head. Then, I started to see Adam Wathan screencasts on Youtube and I was wrong about the process to make good, reusable and easy to maintain UI. So, I changed the way I make UI. This is my process:

Depending on the project name and if they had a logo or some previous design, I build it in my head how it looks like.
I make some research on Pinterest, Dribble, Uplabs
Then, go to Figma and try to build a main page with the ideas that I have. In this step I use a lot what I learned with Refactoring UI book, TailwindCSS and recently, with Tailwind UI. I try to find good designs on the Internet, but always thinking in the code. In this process I use colors from TailwindCSS because it is easier, you can get started really fast and try designs with those colors. Then, if I need it, I define a different primary and secondary palette, different from the tailwind palette. Another thing, that I've been checking as well is light and dark theme colors, depending on the project.
When I finish the main page I look for some feedback from other people, and try to build a new version with this information.
In Figma, I separate the pages from the UI components as I can reuse them. Also, I define the colors, shadows, etc, as local styles.
Depending on my perception of the project, I may created a mobile version of the page. because sometimes it can be really different.
Next, I start the development. I install TailwindCSS and Tailwind UI.
As I learned from Adam, I do my development mobile-first. Then, I add responsive modifiers, depending on the case, while I'm increasing the screen size.
I add some cool animations to the page, and if I really need it, I add custom css classes.
And that's it! With this flow I've been able to build cool UIs in a couple of days. And the good thing is that this works in mobile development as well.

I realized how important is to define and follow a process when build UI. With TailwindCSS I've improved by a lot the way I build UI. I fact I learned how write CSS by using Tailwind. So, if you are new in the web development, I highly recommend that you start using Tailwind and watch the screencasts from Adam, because I guarantee you that you will learn lot.

Note: This website is built with TailwindCSS. 😁