86: Jonathan Reinink - Rebuilding a SaaS with Vue.js and Tailwind CSS

In this episode, Adam talks to Jonathan Reinink about lessons learned rebuilding his SaaS app with Vue.js and Tailwind CSS.

Show Notes

Topics include:

• Wrapping non-Vue libraries as Vue components to maintain a consistent paradigm
• Using Popper.js with Vue to build dropdowns and tooltips
• Using portals to build better modal components
• Patterns for making it easier to reuse components throughout an application
• Which Tailwind CSS component classes Jonathan chose to extract (and which ones he didn't)
• How Jonathan chose to customize his Tailwind configuration for his project
• Using Tailwind's advanced screen options to better accommodate a sidebar layout
• How Jonathan is using Purgecss to reduce his CSS from 110,000 lines of code 1.7mb in development to 8.8kb in production

Sponsors:

• Codeship, check out how they performed in Forrester's latest Continuous Integration Tools report
• Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days

Links:

• Advanced Vue Component Design, Adam's upcoming course
• "Building a Sortable Component with Vue.js", replay from Adam's recent live stream
• Vue.js
• Tailwind CSS
• Turbolinks
• Popper.js positioning library
• Pikaday date picker library
• Vue.nextTick()
• PortalVue, library for rendering elements outside of their parent component
• Portals in React
• Purgecss

What is Full Stack Radio?

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.