Rebuilding FreshBooks with Tailwind CSS

- 1 min

Source Code

Tailwind CSS has been blowing me away lately (dad joke) and one of the things I’ve done to help get up to speed quickly on it was rebuild an existing design (a tip I learned from Adam Wathan in his rebuilding of Coinbase).

I kind of like the design of FreshBooks, so I chose that as a basis for me to learn Tailwind. It was also an opportunity for me to learn Webpack and Webpacker and how to get Tailwind all wired up in a Rails app.

It was a really good experience for me to learn a lot of new things at once, including Flexbox in general as well as how to leverage it from the Tailwind utility classes. I went ahead and published the Rails app in case anyone is interested in viewing the source.

I didn’t extract any components at all, so there is a lot of repitition in the markup, but extracting those out is really straightforward and is definitely something I’d be doing on a real app where this was being used.

Preview Pics

mobile view normal view

Joey Beninghove

Joey Beninghove

Founder of 30 Cubits, CTO of Cart66

rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora