It’s been a long since I have written an article since this crazy time started. Hope all of you are doing well and coping with the pandemic situation.
So I started my professional career as a full stack engineer but mostly focused on the backend stuff.
I did use Bootstrap and some libraries to quickly create the UI which was alright to look. Most people will find that amazing at that time and still some will.
There’s no doubt Bootstrap is a great library and helps you to get started quickly especially if you don’t have much knowledge of writing CSS and frontend stuff.
I always had that guilt of using these libraries that are heavy and you have little control over your UI.
If you have good UI/UX sense then often this doesn’t go hand in hand. So I started to learn the CSS but coming from the backend side it wasn’t fun.
I always felt something wrong the we currently write typical CSS. It wasn’t intuitive and fun to write and easy to understand.
You need to spend a lot of time thinking of the names for your classes. Those classes still weren’t reusable or sometimes the naming didn’t make any sense in the HTML.
Basically, I did not enjoy writing CSS that way and was not able to craft the UI the way I wanted. So I stopped learning CSS in the midway.
Guess what it wasn’t difficult to learn Vue.JS or React but writing CSS was my nightmare.
Somewhere I had that fear that I would never be able to craft a good UI and most backend engineers I met had the same fear that CSS is difficult.
Because most of the time you don’t get exposure to writing core CSS. You just copy-paste components and you go on your way.
I still love good UIs and browsing some of those awesome UIs created by Netflix, Stripe, and Spotify. Somewhere I felt that I’d never be able to create such good UI.
I was spending a lot of time going through dribble and browsing through different designs.
So I decided I couldn’t write CSS but there was that itch that you are not able to scratch so I learned quickly about Adobe XD, and Figma and did some designs by myself.
It was fun until that road came to an end now I have a problem. Now I can design for the product but am not able to recreate those on the front end.
Fast forward a few years Tailwind CSS was introduced by Adam Wathan. I have been following him since he was super active in the Laravel community. I like the Laravel framework.
The people in this community are awesome.
I thought let’s give it a one more try to this. Initially, it was difficult even to use Tailwind CSS because of my limited CSS knowledge but Tailwind’s utility classes made that much easier to grasp some of the concepts.
Then I started implementing different designs using Tailwind. It’s freaking awesome. It made CSS intuitive and fun to write and I like the content-agnostic classes in my html.
I was able to implement design much faster than I would have ever imagined without losing the ability to control each and every UI component.
Now I had that power of raw CSS but I started cloning the websites like Spotify, Myntra, Facebook, Hotstar, Netflix, Amazon, and so on. There is so much you can learn when you start cloning the website.
You learn about the CSS animation and blending modes, and even you start to spot some issues on the UI. It was way easier doing this with Tailwind CSS which is an absolute joy to write.
A few things you need to note:
You still need to know the basics of CSS.
Tailwind only provides the utility classes and it’s unto you how you want your UI to look like.
Now the thing is initially it took me 2-3 days to replicate the website but after practice now it takes me hours to replicate that UI depending on the complexity.
Finally, I was conquering the CSS nightmare.
Why Tailwind?
It provides the utility classes and you will have full control over the UI.
Intuitive syntax and less Cognitive Load with increased productivity.
Fun to write.
Comes with purge CSS so on production build, you will only have those classes that you have actually used. Resulting in smaller CSS files.
Makes you start thinking in components
Well thought CSS utility classes and color pallets.
Completely customizable.
Easier CSS animations, gradients, and blend modes.
Dark mode
JIT mode which allows you to write arbitrary styles.
You can create presets to use in different sub-projects under the main project.
You can just copy and paste the preset and maintain the same pallet and styling across your different websites.
Why not?
You will have a bunch of different classes in your HTML.
Actually, I don’t mind that because that’s where your Modern javascript and blade templates come in handy. You just need to start thinking about components and extract them.
In my opinion, writing CSS in different files has more issues.
It’s a low-level CSS framework you still need to know how CSS works. So if you want to do the quick prototype and don’t want to deal with CSS then Bootstrap or Foundation might be the good choice for you.
But I still recommend using Tailwind even in this scenario if you think you need control over your UI. Now there are a lot of site that provides the readymade component built using Tailwind. You can use those and it still gives you that faster prototype experience and control over your UI.
Here are some sites.
The official paid Tailwind components
Readymade abstract components
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
If you are like me and have a thing for good UI and want to learn then I suggest working on sample projects. You can find the inspiration on Dribble.