Tailwind convert
jasonleow • 13 Oct 2024 •
I’m really enjoying shipping on this tech stack for ProfilePicture.app:
- single index.html file
- vanilla html + js
- Tailwind on CDN
- Cloudflare Pages
You can’t get any leaner or basic than that!
But this stack is nothing new for me. I’ve been going on about single index.html approach for some time now. But what changed is Tailwind. I used to ship with plain vanilla CSS because I really enjoyed the purity and simplicity of using an internet ‘generic’, and being able to remove any third party dependencies. I mean I still use the CSS library Bulma for Lifelog, because that’s what I started with back then, but these days I avoid using any CSS library.
But having to use Tailwind for my freelance work got me really familiar with it, and my perspective changed. The codebase for my gig was a full stack Ruby on Rails monolith on Tailwind and a small sprinkling of plain Javascript. That’s it. No CSS, no <style> tags, no libraries. It’s been such a joy coding on such a uncomplicated stack. I found with the muscle memory of using the utility classes, I started to ship much faster. I no longer needed to scroll up to the <style> to edit the CSS class, then scroll back down to edit the HTML. Or toggle to the CSS file then back to HTML file. Most of the time I just have one .html.erb file open and that’s my complete field of view for the task.
It’s all just there. It’s such a joy to code on.
Tailwind also abstracts out the common style features we need, like to make a header/footer sticky I just add the sticky class to it. Some of the convenience is nice, helped me ship faster too.
And why Tailwind on CDN? Because it’s just adding a <script> and I’m done. No time to figure out or mess around with packages. Besides… with a Lighthouse score of 95, I don’t think I need to worry about optimising tens of kb…
And so I brought that experience from freelance into this new project, and true enough it helped with shipping speed!
Glad to be riding the tailwinds of shipping fast for my latest new project.
Speed > quality at this point
Comments
Dev prefer local so that it only generate the style is required, which mean smaller size.
@haideralmosawi Yes, let’s rebel and rage against merchants of complexity!
@knight Yeah smaller size is always nice. But 95 lighthouse score means if a nice to have optimization for now. Besides, Tailwind is so popular these days, the cdn is likely cached in the user’s browser already
I faced LOTS of issues installing Tailwind locally. I don’t know why I didn’t consider the CDN route. 🤣😭
I feel like a lot of web dev has gotten super complicated. It’s nice when there are ways to simplify how to approach it.