Life with Tailwind

Scott Zirkel — Sat, 05 Dec 2020 18:40:00 +0000

This article was originally posted on Medium

If you've been following along, you know I'm a huge fan of Tailwind CSS. And a pretty early adopter. I've documented my first week (v0.1.4) and my first year (v0.6) with it.

This week Tailwind 2.0 comes out and I just thought I'd give an update on where I stand with it.

I still love it.

I've been using it for each project I've done since it's release in 2017. I haven't touched another framework or written my own CSS (outside of a few custom bits here and there within Tailwind) and it's been great. I've worked on small projects alone and very large projects with a team.

Old Code Smell

I guess I should start with the older projects. It's been a few years now, and I've had to go back and make updates, do maintenance… all the fun things that come with development. If I open a pre-Tailwind site, I never know what to expect. Was I using BEM? Was I using one CSS or a whole bunch that the pre-processor put together. Was it PostCSS, SCSS, LESS? And then I had to figure out the naming scheme we were using at the time. Not always easy to remember the difference between primary_nav and main_nav a few years later.

Opening an older Tailwind site and I know what everything is without having to think. Also, I can scan the classes and get a pretty good picture of what it will look like without diving into ancient dusty CSS files.

This image has nothing to do with the article, I just like it.

This past year I began a new job and am now working with a much larger team. Previously it was just myself and one other developer. With this new team we had many projects that used Bootstrap, custom CSS, or a mix. For anything new I brought in Tailwind and the team was able to pick it up almost immediately. We are phasing out some of the older code and replacing it with a full TALL stack. Tailwind in a component setting is where it really shines. No more trying to come up with descriptive names for full component designs or wondering if they already exist some place else.

And, of course, to keep things looking too similar, it's very easy to extend the config file and change up the site colors. Helpful for one of our apps which serves multiple templated domains.

Tailwind UI

Another amazing thing to come out of Tailwind this year was Tailwind UI. Tailwind UI is a licensed group of pre-built elements using Tailwind and occasionally a small smattering of JS (thanks Alpine!). For the UI builds, this has been an amazing way to quickly add components with little to no customization. I don't have any metrics on how much faster things are now, but I'm sure it's a number you'd be impressed by, so we'll just go with that.

How will Tailwind shape things moving forward? I honestly don't know, but for someone who was been writing CSS since the 20th century, it's really great to simply not think about anymore.

More of Me

Should you want more of me (weirdo), please visit me at scottzirkel.com or follow me here on ~~Medium~~ DEV.

Current Tech Stack

Scott Zirkel — Sat, 01 Feb 2020 22:17:44 +0000

Figured I'd start this off with a list of what I'm currently building with. I'm a full-stack dev, so I work with both client- and server-side code daily.

Server-Side

For my server-side code I typically work with the latest version of Laravel. Occasionally I'll build something custom or use a micro-framework like Lumen, but for most things, Laravel fits the bill nicely.

Client-Side

For client-side I use VueJS when I need a JS framework or vanilla ES-6 when I just need to write a bit. I do want to checkout AlpineJS for the smaller things, as it does seem to be better suited for it. With my Laravel builds, Livewire looks promising, but I haven't used it in production yet.

For years I just wrote my CSS by hand. Then Bootstrap came out and I did enjoy its ease of use, but soon tired of how similar everything started looking, so back to hand written CSS for me. But then TailwindCSS came out, and I jumped in with both feet. I have documented my early experiences with it pretty well, but it's been 2+ years and it's still part of my daily workflow. Good stuff.

Inertia

So between Laravel & VueJS I use a package called Inertia. It's hard to say if it's really a server-side or client-side, though it definitely leans more client. It allows me to use VueJS instead of Blade files, turning the site into an SPA, but without the issues that typically come with SPAs. All the backend power of Laravel, with the ease of use of Vue. Perfect. And the beauty is, it's not vendor locked, so you can use Ruby & React or whatever you like, and it'll still work. If you haven't already, definitely check it out.

That's it for now, got questions or suggestions? Hit me up!

DEV Community: Scott Zirkel