Hello everyone! I hope you're all doing well, and welcome to my first-ever blog post!

In today's edition of Potentially controversial developer hours I will explain why I, as a relatively new frontend aficionado, love using Tailwind CSS in my projects. Perhaps I even prefer using it over plain CSS.

With that being said, fire up your VS Code, and let's begin!

1. The General Workflow is Simplified

One of my favorite things about this CSS framework is that you don't have to write any CSS to get its best. In fact, the CSS is already written for you in the form of unique classes.

Each class defines a different CSS property. All you need to do is include the class(es) that you need in the HTML tag of the element you wish to modify.

2. Easy to Learn and Understand

Some frameworks are often subject to some bad reviews because of the steep learning curve. With Tailwind CSS, this curve is so shallow it's practically non-existent.

From my experience, once you learn basic classes for essential CSS properties, you'll most likely be able to create a basic web page fast. Class names are very intuitive and self-explanatory enough to help even those with less CSS knowledge get started.

3. An Extensive List of Specific Classes

Tailwind CSS comes equipped with so many pre-defined classes. These cover pretty much every CSS property you can think of. The only 'constraint' comes with properties that deal with the sizes and colors of different elements.

That's simply because no one can genuinely define every size and color and put them into individual classes. That would take (at least) forever and would unrealistically increase the framework's source file size, which is a big no-no.

However, I don't think this is a huge problem because Tailwind is...

4. Easily Customizable

You can directly edit its configuration file when you include Tailwind CSS into your project. Extremely convenient. You can define more classes and assign them different CSS properties.

Do you need a size setting for your paragraphs that isn't included in pre-defined classes (and that's more specific than 'text-sm')? No problem! Name your class and assign it your desired setting in the 'extend' section of the config file.

Or do you, perhaps, need a specific color for which you have a hex value? If so, great - add it to the config file under the 'extend.' You can even start from scratch by overriding Tailwind's default settings using the 'theme' section in the file.

5. Easily Integrated

Whether your project uses the regular 'HTML/CSS + JS' stack, or you're trying out the new version of NextJS, Tailwind's got you covered. It's easy to include it into any frontend project and add its directives to your CSS file(s).

6. Responsive Design Made Simple

Last but certainly not least, I would like to mention another one of my personal favorites.

Gone are the media queries that some of us aren't really fans of. With TailwindCSS, you can create a responsive website/web application even if you don't fully understand how that would work in regular CSS.

Its responsive-design-related classes have helped me create that perfect mobile view for my personal projects significantly faster.

Ultimately, thanks to its exhaustive documentation, I've even learned some more of the regular CSS along the way, so that's certainly another plus.

Conclusion

I understand that some of the more experienced developers from the community won't share my opinions on this framework. That's completely fine, of course!

However, I think that Tailwind CSS is actually great overall. It can give beginners a good starting point for learning modern CSS and help those with more experience noticeably quicken the design process, be it for a personal or a professional project.

Finally, I really hope you enjoyed reading my first post. If you have some thoughts about my writing or some other upsides of Tailwind CSS in mind, please feel free to let me know in the comments.

Thank you so much for sticking around until the end, and I hope to see you again soon! 😄💻