From Hate to Love: How TailwindCSS Won Me Over ❤️
Discovering the Power and Beauty of Tailwind CSS
I'm at the point in my career where I can't imagine front-end development without TailwindCSS. There is no way that I'm going back to whatever the hell I was doing before Tailwind 😅. But I haven't always been this passionate about Tailwind, for a matter of fact, I was a hater less than a year ago! That's right!
If you had asked me about Tailwind a year ago, I would've probably lectured you about why you should use Vanilla CSS or SCSS instead of Tailwind and blah blah ...
In this article, I'm going to go through my personal experience with CSS frameworks and why I had an absolutely wrong mindset about Tailwind.
The Bootstrap Debate: My Side of the Story
I remember the first time I encountered Boostrap. I had absolutely 0 knowledge of web development and I just had to put a simple website together really fast. I did a quick research and I came along with a Bootstrap tutorial. And I was shocked! The guy just went to Bootstrap documentation, copied some stuff and pasted it over to his HTML and boom! That was it! my first reaction to Bootstrap was 👇
But this feeling didn't last long. I started to learn web development and do my own projects. I was trying to become a backend developer at the time and I was learning C# and ASP.NET but I needed some basic HTML web pages to check my applications, I often found myself writing tons of custom CSS. My CSS skills were beyond awful and I was completely dependent on Bootstrap to make my web pages responsive. I always had this feeling that my project is a mess and I need to do something about it. I started using Bootstrap templates, I even purchased a few but again, even in the templates there were tons of custom CSS files which didn't feel right to me, I mean think about it, what's the point of using a framework if you need to write your own CSS so often?
The mixture of Bootstrap utility classes and custom CSS classes bothered me so much that decided THAT'S IT! I'm going to put aside C# and become a master at this CSS thing ( Oh boy 😶 )! This was probably the first time that I really started to put some time and effort into front-end development.
As I started to get better and better with CSS, Bootstrap started to feel like a cage to me. I could see the flexibility and freedom that CSS was offering but I couldn't go outside the box with Bootstrap, that's where SASS comes into play!
Leveling Up My CSS Game: SASS
I don't know how most people first encounter SASS, but I only started using SASS because I had access to some SASS codes in one of my Bootstrap templates 😅
At this point, I was actively looking for a replacement for Bootstrap ( Tailwind wasn't that famous and popular at that time ). I had seen some SASS files in one of Bootstrap templates and they looked cool to me. Although I still wasn't good at CSS ( I sucked at using media queries, but who doesn't ?! 😋 ) but I decided to learn SASS and implement it in my projects. From there I stopped using Bootstrap, although later that Bootstrap knowledge helped me to land some clients and earn a few bucks.
I started using SASS for everything. I had my own mixins for media queries, I had my own functions and helpers and all that good jazz, but the point of this blog post is not about how great SASS is 😅. I mean SASS is awesome! I had a great time with SASS, but that eventually came to an end too.
With Great Power, Comes Responsibility: Vanilla CSS
Now, I used SASS for a long time and I've done tons of projects with it. SASS helped me to become so much better at CSS too. The thing is, SASS makes things easier for you, it's true. But it also adds an extra layer of complexity to your app ( You'll know that if you ever forget to run your SASS compiler and sit there like an idiot thinking why your code is not working 😂 ).
Now, I want to go straight to the point:
I don't think that you need any CSS frameworks to create complex layouts!
That's it! Modern CSS is just sooo powerful that I honestly don't think that you need SASS or LESS to create complex layouts or huge websites.
I've heard this argument that you need these frameworks for huge projects otherwise it's going to become a nightmare to maintain them. But I'm telling you:
It's not about the code but it's about the developer!
I've seen a disaster codebase that was using SASS for styling, I've also seen an awesome huge codebase and they were using just CSS modules for the styling!
At this point, I started to use CSS modules in all of my React/NextJS projects and I was extremely satisfied with it and I never thought that I would ever change that! I still believe that using Vanilla CSS is a really great option and I created tons of high-quality web applications using CSS modules with astonishing results.
But eventually, that era came to an end too ...
From Tailwind Hater to Tailwind Lover
I don't remember the first time I heard about Tailwind, but I do remember one thing, I was so satisfied with CSS modules that I didn't even care about Tailwind! I didn't even bother to google it or check it out for a long time. Finally, my sense of curiosity took over and I searched for a tailwind tutorial on youtube, and as always a Brad Traversy's crash course came up and I started to watch.
Not even 10 minutes through the tutorial, I concluded that this is just Bootstrap and I closed it 😅.
From there I just started to preach hate on Tailwind. Whenever someone asked me why I'm not using Tailwind, I'd say that it makes my JSX dirty, it makes the codebase look cluttered, and I like my stylesheets and JSX to be separated and blah blah.
That actually went on for a long time and I hated the fact that everybody was talking about Tailwind 😄 .
So why did I give up and started using Tailwind, you're asking? Thanks to Open Source! Yes, there was an open-source project and I really wanted to contribute to it and they were using Tailwind for styling. So I told myself, Dang it! Let's see what this Tailwind is all about and I went back to Traversy Media again 😅. This time I actually sat through the whole thing and then I created a landing page using Tailwind to try it out myself, and boy was it love at second sight 😍!
I suddenly realized why everybody is talking about Tailwind all the time and I became one of them instantly 😂 I could see the power in using modular React components and Tailwind together right away! React + Tailwind is so freaking smooth! Chop everything into small reusable components and style them with Tailwind!
I spent the last 6 months building multiple projects and I haven't written a single line of custom CSS since then! I could probably add hundreds of things that I love about Tailwind but I'm going to tell you the things I love the most:
Flexible and Customizable: Tailwind provides a wide range of pre-built utility classes that allow you to quickly style your unique UI components, while also allowing you to customize and extend those classes without writing any custom CSS!
Consistent Design System: With Tailwind, you can create a consistent and cohesive design system across your entire application, which can help you save time and effort in the long run.
Responsiveness: Tailwind makes creating responsive layouts extremely easy. You can easily define your own breakpoints or extend the current default breakpoints. You won't need to worry about media queries anymore. This will make you 10x more productive while building complex UI components.
Naming CSS classes 😵💫:
are__you--sick-of-this ?I don't know about you but I sure was! Although by using CSS modules you can create CSS classes with a very short name, I still didn't like worrying about naming my CSS classes. With Tailwind, you'll never need to worry about that again!Faster Development: Tailwind allows you to build UI components faster and with less effort. also I don't need to constantly switch between my stylesheets and my JSX. Everything is on the same page and it makes debugging so much easier
Mobile-First Approach: I always follow the mobile-first approach no matter what! I did this even when I was creating apps with SASS and CSS. Tailwind follows a mobile-first approach too, which means that all styles are designed for mobile devices first and then scaled up for larger screens. This ensures that your application is optimized for mobile devices and provides a great user experience.
Accessibility: Tailwind provides accessibility-friendly classes that make it easier to create a more accessible user interface.
Rapid Prototyping: Tailwind's utility classes enable you to rapidly prototype your UI components and layout without worrying about styling, which means you can focus on building out your application.
Integrated with Popular Frameworks: Tailwind can be easily integrated with popular frameworks such as React, Vue.js, and Angular, which makes it an ideal choice for modern web development.
Large community: Tailwind CSS has a large community of developers who contribute to its development and provide support through forums and online communities.
Whether you're a seasoned web developer or just starting out, Tailwind offers a range of benefits that make it an excellent choice for creating modern, responsive, and consistent web designs quickly and efficiently.
Conclusion
In conclusion, Tailwind CSS has proven to be a game-changer for me in terms of web development. It has allowed me to create stunning designs and layouts without having to write complex CSS code. The utility-first approach of Tailwind CSS has saved me countless hours of development time, which I can now dedicate to other areas of my work.
Furthermore, Tailwind CSS has enabled me to maintain consistency and coherence throughout my web applications. The pre-defined design system of Tailwind CSS has made it easier for me to keep my design choices in check and create designs that are visually appealing and user-friendly.
Overall, I couldn't be happier with the results I've achieved using Tailwind CSS. If you're on the fence about trying out Tailwind CSS, I strongly recommend giving it a chance. With some patience and practice, you'll soon discover the same benefits that I have.
Thanks for reading! make sure to connect with me on social media ✨