├── .gitignore
├── public
    ├── robots.txt
    ├── favicon
    │   ├── favicon.ico
    │   ├── favicon.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── apple-touch-icon.png
    │   ├── mstile-150x150.png
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-256x256.png
    │   ├── browserconfig.xml
    │   ├── site.webmanifest
    │   └── safari-pinned-tab.svg
    └── index.html
├── src
    ├── index.js
    ├── components
    │   └── Button.svelte
    ├── App.svelte
    ├── pages
    │   └── Home.svelte
    └── main.css
├── tailwind.config.js
├── postcss.config.js
├── snowpack.config.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .build
2 | build
3 | web_modules
4 | node_modules
5 | .env


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/favicon.ico


--------------------------------------------------------------------------------
/public/favicon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/favicon.png


--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/public/favicon/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/favicon/android-chrome-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/monitoro-inc/svelte-tailwind-snowpack/HEAD/public/favicon/android-chrome-256x256.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import App from './App';
2 | 
3 | const app = new App({
4 |   target: document.querySelector('#main')
5 | });
6 | 
7 | export default app;
8 | 


--------------------------------------------------------------------------------
/src/components/Button.svelte:
--------------------------------------------------------------------------------
1 | <div
2 |   class="px-4 py-1 text-sm text-white bg-blue-500 rounded cursor-pointer select-none hover:bg-blue-600 active:bg-blue-700"
3 |   on:click>
4 |   <slot />
5 | </div>
6 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Router, Route } from "svelte-routing";
 3 |   import Home from "pages/Home";
 4 | 
 5 |   export let url = "";
 6 | </script>
 7 | 
 8 | <Router {url}>
 9 |   <Route path="/" component={Home} />
10 | </Router>
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ['./src/**/*.svelte', './public/*.html'],
 3 |   theme: {},
 4 |   variants: {
 5 |     extend: {
 6 |       backgroundColor: ['active']
 7 |     }
 8 |   },
 9 |   plugins: [require('tailwindcss-font-inter')()]
10 | };
11 | 


--------------------------------------------------------------------------------
/public/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png?v=ngJXw5Oder"/>
 6 |             <TileColor>#2b5797</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const tailwind = require('tailwindcss');
 2 | const autoprefixer = require('autoprefixer');
 3 | const cssnano = require('cssnano');
 4 | 
 5 | const plugins =
 6 |   process.env.NODE_ENV === 'production'
 7 |     ? [tailwind, autoprefixer, cssnano]
 8 |     : [tailwind, autoprefixer];
 9 | 
10 | module.exports = { plugins };
11 | 


--------------------------------------------------------------------------------
/snowpack.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("snowpack").SnowpackUserConfig } */
 2 | module.exports = {
 3 |   mount: {
 4 |     public: '/',
 5 |     src: '/_dist_'
 6 |   },
 7 |   plugins: [
 8 |     '@snowpack/plugin-svelte',
 9 |     '@snowpack/plugin-dotenv',
10 |     '@snowpack/plugin-postcss'
11 |   ],
12 |   installOptions: {
13 |     polyfillNode: true
14 |   },
15 |   alias: {
16 |     components: './src/components',
17 |     pages: './src/pages'
18 |   }
19 | };
20 | 


--------------------------------------------------------------------------------
/public/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Snowpack App",
 3 |   "short_name": "Snowpack App",
 4 |   "icons": [
 5 |     {
 6 |       "src": "./android-chrome-192x192.png?v=ngJXw5Oder",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "./android-chrome-256x256.png?v=ngJXw5Oder",
12 |       "sizes": "256x256",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "theme_color": "#6f57ff",
17 |   "background_color": "#6f57ff"
18 | }
19 | 


--------------------------------------------------------------------------------
/src/pages/Home.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Button from "components/Button";
 3 | 
 4 |   let counter = 0;
 5 | 
 6 |   function increment() {
 7 |     counter += 1;
 8 |   }
 9 | </script>
10 | 
11 | <div class="flex flex-col items-center justify-center mt-24">
12 |   <div
13 |     class="flex flex-col items-center justify-center p-4 bg-white rounded shadow">
14 |     <h1 class="mb-8">Hello Snowpack!</h1>
15 | 
16 |     <p class="mb-4">Clicked {counter} times.</p>
17 | 
18 |     <Button on:click={increment}>Click me</Button>
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html {
 6 |   @apply bg-gray-100;
 7 |   @apply text-gray-800;
 8 | }
 9 | 
10 | body {
11 |   @apply h-full;
12 |   @apply antialiased;
13 |   @apply text-gray-800;
14 | }
15 | 
16 | a {
17 |   @apply text-purple-500;
18 | }
19 | 
20 | h1 {
21 |   @apply text-3xl;
22 |   @apply text-gray-700;
23 |   @apply font-light;
24 |   letter-spacing: -0.02em;
25 | }
26 | 
27 | h2 {
28 |   @apply text-xl;
29 |   @apply text-gray-600;
30 |   @apply mb-2;
31 |   letter-spacing: -0.02rem;
32 | }
33 | 
34 | h3 {
35 |   @apply text-gray-600;
36 |   @apply font-bold;
37 |   @apply mb-2;
38 | }
39 | 
40 | .whitespace-breakspaces {
41 |   white-space: break-spaces;
42 | }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-tailwind-snowpack",
 3 |   "version": "1.0.0",
 4 |   "author": {
 5 |     "name": "Omar Kamali",
 6 |     "email": "omar@monitoro.xyz",
 7 |     "url": "https://monitoro.xyz"
 8 |   },
 9 |   "scripts": {
10 |     "start": "snowpack dev",
11 |     "build": "snowpack build",
12 |     "build:css": "postcss --verbose"
13 |   },
14 |   "dependencies": {
15 |     "svelte": "^3.24.0",
16 |     "svelte-routing": "^1.4.2",
17 |     "tailwindcss-font-inter": "^2.0.0"
18 |   },
19 |   "devDependencies": {
20 |     "@snowpack/plugin-dotenv": "^2.0.5",
21 |     "@snowpack/plugin-postcss": "^1.0.11",
22 |     "@snowpack/plugin-svelte": "^3.4.1",
23 |     "autoprefixer": "^10.1.0",
24 |     "cssnano": "^4.1.10",
25 |     "postcss": "^8.2.1",
26 |     "postcss-apply": "^0.12.0",
27 |     "postcss-cli": "^8.3.1",
28 |     "postcss-cssnext": "^3.1.0",
29 |     "postcss-import": "^14.0.0",
30 |     "snowpack": "^2.18.5",
31 |     "svelte-preprocess": "^4.6.1",
32 |     "tailwindcss": "^2.0.2"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Tailwind Snowpack Boilerplate
 2 | 
 3 | > ✨ Bootstrapped with Create Snowpack App (CSA).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | ### yarn start
 8 | 
 9 | Runs the app in the development mode.
10 | Open http://localhost:8080 to view it in the browser.
11 | 
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 | 
15 | ### yarn build
16 | 
17 | Builds a static copy of your site to the `build/` folder.
18 | Your app is ready to be deployed!
19 | 
20 | **For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/master/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file.
21 | 
22 | ## Environment Variables
23 | 
24 | You can use environment variables provided they are prefixed with `SNOWPACK_PUBLIC_`.
25 | 1. Define your variable in an `.env` file in the root of your project
26 | 2. Use them in your code using `import.meta.env.SNOWPACK_PUBLIC_YOUR_ENV_VAR`
27 | 
28 | ## License
29 | 
30 | This project is licensed under the MIT License.
31 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="h-full" lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Snowpack App</title>
 8 | 
 9 |     <link
10 |       rel="apple-touch-icon"
11 |       sizes="180x180"
12 |       href="/favicon/apple-touch-icon.png?v=ngJXw5Oder"
13 |     />
14 |     <link
15 |       rel="icon"
16 |       type="image/png"
17 |       sizes="32x32"
18 |       href="/favicon/favicon-32x32.png?v=ngJXw5Oder"
19 |     />
20 |     <link
21 |       rel="icon"
22 |       type="image/png"
23 |       sizes="16x16"
24 |       href="/favicon/favicon-16x16.png?v=ngJXw5Oder"
25 |     />
26 |     <link rel="manifest" href="/favicon/site.webmanifest?v=ngJXw5Oder" />
27 |     <link
28 |       rel="mask-icon"
29 |       href="/favicon/safari-pinned-tab.svg?v=ngJXw5Oder"
30 |       color="#6f57ff"
31 |     />
32 |     <link rel="shortcut icon" href="/favicon/favicon.ico?v=ngJXw5Oder" />
33 |     <link rel="stylesheet" href="/_dist_/main.css" />
34 |     <meta name="msapplication-TileColor" content="#2b5797" />
35 |     <meta name="theme-color" content="#6f57ff" />
36 |   </head>
37 | 
38 |   <body>
39 |     <div id="main"></div>
40 |     <script type="module" src="/_dist_/index.js"></script>
41 | 
42 |     <noscript>You need to enable JavaScript to run this app.</noscript>
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/public/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M606 2554 c19 -22 50 -70 69 -109 93 -194 63 -294 -134 -450 -58 -46
13 | -118 -99 -132 -117 -99 -127 -128 -329 -66 -462 35 -75 138 -177 235 -231 39
14 | -22 72 -43 72 -46 0 -3 -12 -11 -27 -18 -54 -25 -121 -82 -157 -134 -40 -57
15 | -64 -153 -52 -201 6 -24 10 -27 34 -21 39 9 142 69 202 116 58 46 70 42 70
16 | -21 0 -143 94 -630 136 -712 41 -79 336 -158 541 -145 160 11 348 71 402 130
17 | 35 39 72 268 117 734 l5 51 63 -48 c35 -26 97 -64 137 -84 l73 -37 9 23 c13
18 | 35 2 118 -24 172 -29 63 -101 134 -172 171 -32 17 -57 32 -57 35 0 3 27 20 61
19 | 38 33 18 91 63 129 99 120 113 158 228 126 381 -30 145 -79 218 -216 322 -178
20 | 136 -220 230 -169 383 24 73 58 134 102 184 l32 36 -40 -7 c-109 -21 -238
21 | -123 -291 -232 -33 -68 -44 -169 -24 -229 7 -20 46 -86 87 -147 41 -61 88
22 | -139 104 -174 32 -69 46 -156 32 -193 -10 -24 -10 -24 -29 14 -28 56 -57 73
23 | -169 97 -88 19 -131 22 -350 22 -222 0 -262 -2 -355 -23 -58 -12 -128 -33
24 | -156 -45 -49 -22 -94 -69 -94 -98 -1 -8 -6 -6 -16 7 -12 15 -15 38 -12 91 4
25 | 84 45 176 133 299 102 142 121 206 90 311 -41 144 -183 279 -314 300 l-41 7
26 | 36 -39z m1034 -996 l65 -13 12 -60 c18 -89 33 -256 33 -359 0 -73 -2 -87 -12
27 | -74 -57 70 -173 61 -224 -17 -36 -55 -15 -146 44 -189 37 -28 113 -27 152 2
28 | l30 23 0 -46 c0 -69 -17 -221 -47 -408 -30 -194 -24 -185 -147 -217 -162 -41
29 | -307 -36 -469 17 l-77 26 -15 51 c-23 81 -63 291 -80 421 -20 157 -20 151 8
30 | 133 58 -38 123 -31 173 18 60 61 55 145 -13 205 -33 28 -41 31 -90 27 -36 -3
31 | -60 -11 -76 -26 -13 -12 -27 -22 -32 -22 -10 0 1 403 13 445 7 27 15 32 76 47
32 | 37 9 104 21 149 27 105 12 442 5 527 -11z"/>
33 | </g>
34 | </svg>
35 | 


--------------------------------------------------------------------------------