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!