Sapper Postcss Template

A template that includes Sapper for Svelte and PostCSS preprocessing with Tailwind CSS

๐ŸŒ Sapper with PostCSS project base

โ“ What is this?

This is an extension to the official Sapper Rollup template with support for PostCSS inside Svelte components. You are also recommended to check out @nhristov's similar template.

If you're looking for something with much, much more bundled in, check out my opinionated project base.

๐Ÿงญ Project Status

This project base will continue to be maintained until SvelteKit is ready.

Once you are prepared to migrate, check out the Svelte Adders project for information about how to recreate this project base's functionality. You should specifically look at svelte-add-postcss and svelte-add-tailwindcss.

Read on to use this project base today:

๐Ÿ“‹ Copy

Choose either to clone or fork depending on your preference.

๐Ÿ‘ Clone

git clone

๐Ÿด Fork

Click the Use this template button on this project's GitHub page.

โฌ‡๏ธ Install Dependencies

You need to be using version 14.15 or higher of Node.

cd sapper-postcss-template
npm install  # pnpm also works

๐Ÿ›  Usage

๐Ÿงช Development

npm run dev

๐Ÿ”จ Building for Production

npm run prod

๐Ÿ“ฆ Exporting a Static Site

npm run export

โš™ Configuration

๐Ÿ’จ Optionally removing Tailwind CSS (and PurgeCSS)

  1. Remove all Tailwind imports in the src/global.pcss file
  2. Remove these lines in postcss.config.js:
    1. const tailwindcss = require("tailwindcss");
    2. const tailwindcssConfig = require("./tailwind.config");
    3. tailwindcss(tailwindcssConfig),
  3. Delete the tailwind.config.js file
  4. Uninstall the tailwindcss package

โšก Web app

Many of the fields in static/manifest.json (short_name, name, description, categories, theme_color, and background_color) are filled with demonstrative values that won't match your site. Similarly, you've got to take new screenshots to replace the included static/screenshot-1.png file. If you want, you can add app shortcut definitions for "add to home screen" on Android. Once you change theme_color, update the meta name="theme-color" tag in src/template.html to match.

The Apple touch icon, favicon, and logo- files (also all in the static directory) are created by placing the logo within a "safe area" centered circle that takes up 80% of the canvas's dimension. For instance, the constraining circle in logo-512.png is 512 ร— 0.80 = 409.6 โ‰ˆ 410 pixels wide and tall.

๐Ÿ—บ Source maps

This project base comes with source maps enabled during development and disabled during production (and exports) for the best compromise between performance and developer experience. You can change this behavior through the sourcemap variable in rollup.config.js.

๐Ÿ˜ต Help! I have a question

Create an issue and I'll try to help.

๐Ÿ˜ก Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

I'm sorry, because of my skill level and the fragility of (the combination of) some of these tools, there are likely to be problems in this project. Thank you for bringing them to my attention or fixing them for me.

๐Ÿ“„ License


This README was generated with โค๏ธ by readme-md-generator

Top categories

Loading Svelte Themes