DEV Community

Anthony Gushu
Anthony Gushu

Posted on

🐝 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.

Top comments (2)

Collapse
 
paulovieira profile image
Paulo Vieira

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

References:

Collapse
 
anthonygushu profile image
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!