If you haven't noticed, this blog ain't pretty. It has the bare minimum of styling considered legible. I literally copied the CSS from bettermotherfuckingwebsite.com.
Seattle Coffee Radar has almost zero CSS. Just enough to line up the newsletter signup form.
When I decided to undertake a proper design for Seattle Coffee Radar, I remembered a Julia Evans post:
But I only write CSS probably every 4 months or something, and only for tiny personal sites, and in [practice] I always end up with some media query problem sadly googling “how do I center div” for the 500th time. And everything ends up kind of poorly aligned and eventually I get something that sort of works and hide under the bed.
Preach!
Structuring anything more complicated than a string of paragraphs on the web feels insane if you've experienced a platform designed day-one to support general purpose applications (iOS, Android, WPF, take your pick). The web's document-based legacy is a cognitive tax and eternal source of frustration.
Julia's post introduced TailwindCSS as the solution to her CSS woes. Curious and hopeful, I browsed the TailwindCSS site and read some attested benefits:
Wow! Someone must have been in my head a couple years ago, when web frontends were my day job. Every bullet point rang true.
Fast-forward to today. I've been building the redesign for Seattle Coffee Radar with TailwindCSS, and yes, the hype is real.
Everything is predictable. It's just low-to-the-ground CSS. There are no intermediate layers of abstraction to cloud your understanding. Beyond frequent class-name lookups, I haven't felt the need to study TailwindCSS much at all. I'm a few hours into my redesign and I already feel fluent. (Credit where it's due, TailwindCSS includes normalize.css, which is definitely helping here.)
Flexbox is magical. Late to the party I know, but TailwindCSS encouraged me to dive headfirst into Flexbox. My productivity skyrocketed. Finally we have a sane layout system on the web. I've been using this guide from CSS-Tricks as a reference.
Fantastic documentation. The TailwindCSS site has wonderful search. It's snappy to focus the searchbox and navigate the results with just your keyboard. The docs are studded with useful examples and illustrations.
Heaps of video content. The site has screencasts where the creator Adam Wathan builds full UIs in Tailwind. He also livestreams and has a catalog of similar buildouts on YouTube.
Seattle Coffee Radar is ultimately a static site, but the initial render is done in Rails. To integrate TailwindCSS into the asset pipeline, you need to add Webpacker to your project. (Technically you can just link to Tailwind via CDN, but you can't customize the default theme.)
Andrew Mason has a good post on how to wire everything up.
I've made one customization so far via tailwind.config.js, adding a custom font. This generates a new CSS class called font-body.
module.exports = {
theme: {
fontFamily: {
'body': ['proxima-nova', 'sans-serif']
},
extend: {}
},
variants: {},
plugins: []
}
Resulting CSS:
.font-body {
font-family: proxima-nova, sans-serif;
}
I don't mind the Webpack machinery required to customize TailwindCSS, mostly because Webpacker and Rails provide sane, functional defaults. But man, Webpack compilation is SLOW for me. Like 20 seconds slow. I'm not sure who to blame. Running on a Vagrant VM is probably not helping the situation.
I'm encouraged by the progress I make each time I sit down to hack away at Seattle Coffee Radar. I'm honestly surprised at how quickly things are moving along. TailwindCSS and its bundle of modern frontend tools legitimately boost my productivity and make it enjoyable to build web UIs.