🐝 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

Static Stuff 🗞

This also has shortcuts for working with SSG.

yarn static

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.

Comments

[Paulo Vieira]

The solution for the dynamic classes is to use a custom defaultExtractor (in purge.options).

References:

• dev.to/matebek/simplest-way-to-set...
• github.com/tailwindlabs/tailwindcs...
• swyx.io/svelte_tailwind_setup/

[Anthony Gushu]

Thank you so much, this is incredibly helpful. I updated the repo so that that caveat is no longer an issue + made a couple of other QoL improvements that resolved issues with cross-platform development!