Sapper Typescript Tailwindcss Template
🌐 Sapper with TypeScript and Tailwindcss project base
❓ What is this?
This is a stripped down version of the Sapper Typescript-GraphQL-Tailwindcss template.
If you're looking for something with much, much more bundled in, check out Jacob Babich's opinionated project base.
- Sapper for Svelte
- PostCSS
- Tailwind CSS
- Official VS Code Extension
- postcss-import
- PurgeCSS
- CSSNano
Inside Svelte components, thanks to
svelte-preprocess
- Official VS Code Extension
- Tailwind CSS
- TypeScript
- Inside Svelte components, thanks to
svelte-preprocess
- Inside Svelte components, thanks to
📋 Copy
Choose either to clone or fork depending on your preference.
🐑 Clone
git clone https://github.com/mscofield0/sapper-typescript-tailwindcss-template
🍴 Fork
Click the Use this template button on this project's GitHub page.
⬇️ Install Dependencies
cd sapper-typescript-tailwindcss-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
⚡ 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 and static/screenshot-2.png files. 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 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.