Scott Whittaker

Frontend Developer

Day job React | side projects Svelte

Sapper Tailwind

I was watching the Building Workation with Tailwind CSS videos by Adam Wathan where he builds a sample responsive application with Tailwind CSS within a Vue framework. There is only a small amount of Vue development sprinkled in but it provides an insight around where the framework begins to fit in with the development cycle as he fleshes out the application.

Since I wanted to try building out the site myself with Tailwind and since I have also had an eye on Svelte and Sapper I thought it would be worthwhile looking at a setup which allows me to work with that stack.

After a quick search I found the following examples.

  1. tailwindcss setup example for Sapper
  2. sapper-postcss-tailwind-rollup

I also discovered a number of templates on CodeSandbox.

Template

I opted to clone the 2nd example above and remove some of the boilerplate generated by the sapper template so that I have a clean 2 page app to start from.

Sapper Tailwind Template

What next?

Since the setup was straightforward I guess I have to try building out the Workation site now. Another candidate for a side project that never gets completed.

Other stuff

A quick aside, whilst searching around for information I found this introduction to Setting up Tailwind and PostCSS by the Tailwind author Adam Wathan.