Disclaimer
This post may seem opinionated. I just share why I finally move to Tailwind CSS as my main CSS utility tool.
Introduction
So, previously I used Chakra UI for my personal site yehezgun.com. Everything changes when I got a new full-time job as a frontend engineer in my current company. I realized that I’m too dependent on the development tools like UI libraries and some npm registry packages.
I was ever given a task to fix some layouts using native or vanilla CSS and it took about 2 hours for me just to give some styling for a static page. I realized I have to strengthen my fundamental skill again before going further.
Then I found that Tailwind CSS is interesting, so I started to create my own Next.js + TS + Tailwind CSS Starter Template. Thanks to Theodorus Clarence, his starter template helps me a lot to re-create this template on my own. I use his idea and components splitting concepts and modified them based on my current needs.
I don’t say that Chakra UI is bad. Actually, it helps me a lot if I’m developing a site with a short deadline because it increases productivity. But for learning purposes, I prefer Tailwind CSS. Here are whys I finally use Tailwind CSS for my future personal projects.
I Learn CSS Basics While Using Tailwind CSS
Tailwind CSS is not UI Component, it is a utility-first framework for styling purposes. When we work with Bootstrap, Chakra UI, or other UI Component libraries, we just set for example class btn if we want to make a button component or just set <Button></Button> (usually in React UI Libraries).
But in Tailwind CSS, I have to style the component from scratch as I did with plain CSS, but I can completely custom designs in the HTML class name. For me, it feels like writing the inline CSS styles but is a more elegant and much cleaner way.
Code Example:
<button class="bg-sky-600 py-1 px-2 rounded-md">
Save changes
</button>
If I want to add a hover effect, I just add hover:bg-sky-700 in the class name.
Notice something?
I realized that when I’m using Tailwind CSS, I also feel pushed to re-learn the CSS fundamentals again after a long time, LOL. This is interesting when I made a custom styling with Tailwind, I have to know which styling concept I have to use even I didn’t use the original CSS syntaxes.
For example, when I want to create a layout like below. When I use the UI component like Chakra UI, I can easily use the Flex component and add some gaps and spacing using its props. But when I use Tailwind, I have to set my own flex, flex item, spacing. And of course, I have to custom the buttons below by myself using Tailwind.
This is very good for me. When I was finding a new job last year, I was interviewed by some users of the companies and they said the same thing, “You’re really good using these tools. But we need an employee who can write and understand the basics. In this case, that’s plain CSS because we still use it in our systems.”
I’ve read Theodorus Clarence’s docs site, he stated that you have to cover the fundamental of CSS before jumping into frameworks like Bootstrap, Chakra UI, or even Tailwind CSS. And this is very true. In my case, I was often rejected by the recruiter when I have to live code using plain CSS. That’s very embarrassing for me, LOL.
As a full-time worker and has graduated almost two years ago from college, I need to find an effective learning method so I can adapt to the current situation and deliver it fast. Actually, I can learn CSS from scratch, but it takes a too long time and I need a job fast at that time when I was a job seeker.
Until I found Tailwind CSS and yeah as I said before, I can learn the basic CSS through every Tailwind syntaxes.
Very Customizable
Because Tailwind CSS is a utility-first framework, you can fully customize every page or component in your website. You even can make your own design system if you want using Tailwind CSS.
Have you seen Theodorus Clarence’s Next.js + Tailwind CSS Starter Template? For me, it’s like a mini design system packed as a starter template. This inspired me to make a similar template of mine, so when I want to create a new project, I can generate it from the starter template and don’t have to worry about the base config or style and of course, I can be more focused on the development process.
This thing made me realize that I have full control when styling the website using Tailwind CSS.
I Can Maximize The Use of HTML5 Tags
This is very opinionated actually, LOL. But when using Tailwind, I can maximize the use and understanding of HTML5 tags.
Like the first point explanation, when I use the base HTML5 tags, I actually learn about the structure of HTML5 and what’s the best practice that I can implement when creating the web structure.
And like many people said, using proper HTML5 tags can also increase the SEO percentage. You can read the article here.
Closing
If you found that learning the fundamentals takes a long time for you, learn and use a tool, library, or framework that forces you to understand the fundamentals through its features.
As full-time workers or job seekers who graduated from college, we have to find an effective learning method, because we’re racing against time, especially when we need a new job fast. Learning from scratch is sometimes too exhausting and we need more time for that.
This is why we have to choose what tools, library, or framework wisely. Choose those that push you to understand the basics while you using them. In my case, Tailwind CSS is very helpful for me to understand the basic CSS syntaxes while I’m using it through its syntaxes.
I hope you can also learn something from these articles, I’m still an amateur in this. Feel free to have some discussions, you can write it in the comment section below.
References:
Top comments (0)