🐝 Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier 🍯

anthonygushu

Anthony Gushu

Posted on February 15, 2021

🐝 Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier 🍯

I faced the conundrum of starting a new Sapper project with Tailwind 2.0, ESLint, Prettier, and the whole shebang.

Unfortunately for me, all the templates I came across were outdated or a bit too verbose/hacky.

Fortunately for you, I turned my research into a new and improved Sapper template featuring all the nuts and bolts of a more advanced config to help you hit the ground running!

Sapper-Tailwind2-Template repo

🔑 Usage

You can jump in with a quick

npx degit "tonyketcham/sapper-tailwind2-template" my-winded-app
cd my-winded-app
yarn install
yarn dev
Enter fullscreen mode Exit fullscreen mode

Static Stuff 🗞

This also has shortcuts for working with SSG.

yarn static
Enter fullscreen mode Exit fullscreen mode

This will export your site into static files and open a local production server on localhost:5000. You can run this to make sure everything matches your dev server and that you didn't mess up the one Tailwind caveat I'm about to touch on.

🚪 Closing arguments

There are too many dead Sapper templates so the obvious answer is to just add one more to the sea, right? 🥶

If you've got any input or PRs, feel more than welcome to drop them on the repo to keep this thing running for when the ecosystem inevitably gets updated in the future. I'd also love to keep this alive as a SvelteKit template when that finally drops too.

💖 💪 🙅 🚩
anthonygushu
Anthony Gushu

Posted on February 15, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related