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

Announcements

• [4/16/2021]: Highly recommend using SvelteKit over Sapper even for production applications
• [11/10/2021]: With the success of SvelteKit as the replacement to Sapper, this project will be deprecated and archived when SvelteKit leaves beta
• [1/5/2023]: SvelteKit has reached v1.0 and as such, this project has been archived and is now read-only

All the Sapper x Tailwind 2.0 starter templates I came across were outdated using either Tailwind v1 or an old version of Sapper.

So I made one for getting started featuring all the nuts and bolts of a more advanced config to help ya hit the ground running quicker.

Very open to community PRs to keep this thing up to date and eliminate the headaches others will go through when things inevitably get updated in the future.

Usage 🧙‍♂️

With degit

npx degit "tonyketcham/sapper-tailwind2-template" my-winded-app

With GitHub Templates

Click on "Use this template" to create a new project repository initialized by the template.

Running the project

Once you have created the project, install dependencies and run the project in development mode:

cd my-winded-app
yarn install
yarn dev

This will start the development server on localhost:3000. Open it and click around.

You now have a fully functional Sapper project! To get started developing, consult sapper.svelte.dev.

Previewing Static Site Generation

yarn static

This will export your site into static files and open a local production server on localhost:5000. Open it and make sure everything matches your dev server.

📝 Notes

You will encounter this when you run yarn dev:

• service worker
No directory provided. Skipping CSS generation

This is a Sapper service worker issue and can be safely ignored until they address this with a fix.

Contributions

I'm very open to issues & PRs to keep this template updated, improved, and living on as a source of maintained truth. Don't shy away from posting in the issues or discussions tab with any questions or problems you're facing, or your thoughts on how to improve this template.