Learning TailwindCSS as a Long Time CSS Developer

Why I Tried Tailwind

Simple answer. I tried tailwind because a client was using it on their Vue/Laravel project. I didn't pick tailwind. I wasn't really planning to learn it any time soon. Honestly "because my company uses it" or "because it was a client requirement" is a good reason to learn something new. You don't need to buy into the underlying philosophy of a library in order to learn it.

My Thoughts on Tailwind

What I Like About Tailwind

At first I didn't really care for it much. I've been writing CSS for about 15 years at this point and I know most of the rules by now. So having to look up class names wasn't very convinient. But the documentation is great. The library is updated frequently and had classes for all of the styles I needed.

Typically when I write Vue components I like to use the SFC (Single File Component) structure. I love having all of my styles, logic, and markup in one file. I also typically use Scss for my styles along with a config file with all of my colors and other variables. I didn't think Tailwind would have much to offer since I wasn't context switching between files anyway. However, once I memorized some of the class names I started to really like Tailwind. No clunky imports of config files all over. No media queries to organize.

I also like having a limited number of colors, spacing, and sizing options. At first glance this can seem like a drawback. But in the long run this limitation will result in more maintainable styles. I've worked on many sites that had a ton of different colors, inconsistant font sizes and spacing. Adding branding colors is also easy.

What I Don't Like About Tailwind

First, learning all of the class names was a pain. Espcially for the media queries. It took a while to wrap my mind around the way the responsive styles work.

Also class attributes get long and it can be difficult to understand all of the styles at once.

When I Would Use Tailwind Again

It think I will be more open to using Tailwind for React projects than Vue. I love the SFC style that Vue offers and find it easier to maintain styles written in CSS or Scss. But React doesn't really offer a similar functionality. I'm not a fan of CSS-in-JS and styled components are a lot of overhead.

I also think Tailwind would be really useful for projects with multiple devleopers working simultaneously. I really like the way Tailwind enforces colors and spacing. It also enforces a lot of best practices.

Need Help with Your Website

If you need help with your website contact me here.

© 2023, Elizabeth Rogers All Rights Reserved