Snowpack Tailwind

✨ Bootstrapped with Create Snowpack App (CSA).

Ready-to-go template to create awesome websites using Tailwind on top of Snowpack and autopublish to GitHub pages using GitHub Actions.

• Quick start
• Features
• Available Scripts

Quick start

# Bootstrap the template into a new folder called `my-app`
npx create-snowpack-app my-app --template snowpack-template-tailwind

# Enable Prettier on git-commit
cd my-app
npm run install:husky

# Start the development server
npm start

✨ Optional: Enable autopublish to get your site deployed on GitHub Pages on every commit you push.

Optional install using Yarn:

# Bootstrap the template into a new folder called `my-app`
npx create-snowpack-app my-app --template snowpack-template-tailwind --use-yarn

# Enable Prettier on git-commit
cd my-app
yarn install:husky

Features

• Snowpack, of course.
• Tailwind.
• Prettier.
• Force prettier on git-commit.
• Autopublish on Github Pages.

Q: How do I enable auto publish to GitHub Pages?

1. Update the value of homepage in package.json. It should look like https://<your-username>.github.io/<your-repo-name> (no trailing slash).
2. Push your changes into a new GitHub repository.
3. You should see an Action running on https://github.com/<your-username>/<repo-name>/actions
4. Make sure to enable GitHub pages for your repo and select the gh-pages branch
5. Give GH Pages some minutes, your site should be live on https://<your-username>.github.io/<your-repo-name>
6. Enjoy :)

Q: How do I disable auto publish to GitHub Pages?

Remove the .github/workflows/publish.yml file.

Q: How do I check my code syntax (Prettier) on git-commit?

Run npm run install:husky.

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like @snowpack/plugin-webpack or snowpack-plugin-rollup-bundle to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.