Making Our Gig Pages Look Right Everywhere with Tailwind CSS

Yesterday I wrote about why we didn't build our music community from scratch. Today, the fun part: making it look good! My developer friend and I spent the weekend restyling our event pages with Tailwind CSS, and I came away with a new appreciation for a tool I'd never heard of a month ago.

Changing things while you watch

Tailwind is "utility-first", which in plain English means you style things with lots of small ready-made classes instead of writing custom CSS. In practice, I could say "a bit more space under the band name" and see it change straight away. We tried about six versions of the gig card in one evening.

Our colours, defined once

Colours, spacing, fonts and screen sizes all live in one configuration file. Our purple and the slightly loud orange we use for "sold out" are defined once and used everywhere, so nobody gets to sneak in a seventh shade of purple. (That was me. I was the one.)

The same look on the website and in the app

Because Tailwind is so widely used, there are versions of it for React Native as well. The event card on the website and the event card in the app share the same styling, so members stop asking why it looks different on their phone.

Phones first

Prefixes like sm, md, lg and xl change the layout by screen size. Most of our members check gig details on their phone on the way to the venue, so we designed for that first and let bigger screens catch up. There's also a big community making plugins and themes, so my friend rarely had to start from nothing.

I still can't write CSS, but at least now my opinions about it are useful 😄