Thank You TailwindCSS

When Brightball was still doing contract work, we always hired someone else to convert any designs to proper HTML/CSS. Back then (2008-2011), a design that worked properly across different browsers required a lot of weird tricks. Gradients were accomplished with tiled background images. Widgets with rounded corners and shadows needed images in place to be consistent. Transparency was unreliable. Because of all of the reliance on images to complete a good looking design, I assumed that I would need to be profiencient in Photoshop or some equivalent to even try...so I didn't. I had enough to keep up with just from the assortment of backend technologies, devops tooling and databases.

When Twitter Bootstrap came along to try to solve this problem, it came with another problem: reliance on learning a widget library. It was still a huge help and continues to set the standard, but I was still worried about the learning curve, keeping up with new versions, lack of flexibility, etc. Anytime I made an effort to sit down and learn it, I'd be confronted with a new problem: is Bootstrap the "best" option? Zurb Foundation consistently receives great recommendations and their email templates seem to still be best in class. If you spend any time on Hacker News following these conversations it ultimately turns into a showcase of different options that people like, such as Semantic UI. These will be followed by complaints about the total size of all of the frontend parts that users are forced to download, with recommendations of more minimalistic frameworks like Milligram or Pure.css. All of these options felt like they had negative tradeoffs. Completeness vs Size. Ecosystem of materials, examples and templates vs trends. Ultimately they all come with the same "learn this or that, but not the standards themselves."

Over the last few months, I noticed a different trend. Virtually universal praise for Refactoring UI and TailwindCSS. Such agreement is virtually unheard of in technical circles and over time, this got my attention. So I bought Refactoring UI, a design book that steps through parts, principles, structuring your style guide and examples independent of any specific framework. All of it made sense to me and I found virtually nothing that I could argue against. That's odd for me too.

So I figured...if these are the same people who made TailwindCSS, maybe it was worth looking into. I spent a few hours going through the TailwindCSS Screencasts. It was really straightfoward. Instead of learning a component/widget library, all of the parts were laid out and you learned to build any widgets you'd need with pure CSS rather than prebuilt widgets. Flexbox and grids were made simple. Every part of the system was extendable or replaceable. With Tailwind you're really getting a consistent structure for the different parts of your design that includes sensible defaults. And the bloated framework concern? It scans your code and purges anything that's not being used when you deploy to production.

As a real experiment, I set out to rebuild this site design. Rebuilding this blog is my goto way to experiment with new technologies. The design has existed for 12 years and as much as I like it, I've never been able to update it. Images underlying the CSS for backgrounds, widgets and shadows, the menu at the upper right was built with images that position shifted the background on hover using a font that I couldn't identify. With Tailwind, I was able to rebuild the entire thing in only a few hours and make it responsive! It's not perfect of course, but much better than anything I've attempted in the past. The CSS payload, 13kb. I didn't have to make any special decisions to make that happen either. About 80 lines of custom CSS to help style all of the existing articles and 15 extensions to tailwind config beyond the default (colors, sizes, etc). It made it so easy. The only Javscript is a couple of lines of vanilla JS to toggle the responsive menu when it appears. Simple prefixes of sm, md, lg, and xl define screen size breakpoints (you can easily add your own as well) and allows you to specify simple changes in style as it grows. This makes adjusting a design for responsiveness really simple.

So thank you for making all of this so much more approachable. The popularity is warranted. And if you do want prebuilt components to use with it, they've got you covered with TailwindUI.