Rebuilding FreshBooks with Tailwind CSS
Jan 11 2018This is just a quick demonstration of Tailwind CSS, a utility-first CSS framework. As part of learning Tailwind, I decided to try rebuilding one of the screens from the Freshbooks admin area.
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
