├── .gitignore
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── index.html
    └── logo.svg
├── jest.config.js
├── src
    ├── TailwindStyles.svelte
    ├── App.test.js
    ├── index.js
    └── App.svelte
├── web-test-runner.config.js
├── jest.setup.js
├── svelte.config.js
├── tailwind.config.js
├── snowpack.config.js
├── package.json
├── README.md
└── LICENSE


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


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


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


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   ...require("@snowpack/app-scripts-svelte/jest.config.js")(),
3 | };
4 | 


--------------------------------------------------------------------------------
/src/TailwindStyles.svelte:
--------------------------------------------------------------------------------
1 | <style global>
2 |   @tailwind base;
3 |   @tailwind components;
4 |   @tailwind utilities;
5 | </style>


--------------------------------------------------------------------------------
/web-test-runner.config.js:
--------------------------------------------------------------------------------
1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
2 | process.env.NODE_ENV = "test";
3 | 
4 | module.exports = {
5 |   plugins: [require("@snowpack/web-test-runner-plugin")()],
6 | };
7 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom/extend-expect";
6 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | const sveltePreprocess = require("svelte-preprocess");
 2 | 
 3 | const preprocess = sveltePreprocess({
 4 |   postcss: {
 5 |     plugins: [require("tailwindcss"), require("autoprefixer")],
 6 |   },
 7 | });
 8 | 
 9 | module.exports = {
10 |   preprocess,
11 | };
12 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: {
 3 |     content: ["./src/**/*.svelte"],
 4 |   },
 5 |   theme: {
 6 |     extend: {
 7 |       colors: {
 8 |         orange: {
 9 |           500: "#ff3e00",
10 |         },
11 |       },
12 |     },
13 |   },
14 |   variants: {},
15 |   plugins: [],
16 | };
17 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import { render } from "@testing-library/svelte";
 2 | import { expect } from "chai";
 3 | import App from "./App.svelte";
 4 | 
 5 | describe("<App>", () => {
 6 |   it("renders learn svelte link", () => {
 7 |     const { getByText } = render(App);
 8 |     const linkElement = getByText(/learn svelte/i);
 9 |     expect(document.body.contains(linkElement));
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import App from "./App.svelte";
 2 | 
 3 | var app = new App({
 4 |   target: document.body,
 5 | });
 6 | 
 7 | export default app;
 8 | 
 9 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
10 | // Learn more: https://www.snowpack.dev/#hot-module-replacement
11 | if (import.meta.hot) {
12 |   import.meta.hot.accept();
13 |   import.meta.hot.dispose(() => {
14 |     app.$destroy();
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/snowpack.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("snowpack").SnowpackUserConfig } */
 2 | module.exports = {
 3 |   mount: {
 4 |     "src": {url: "/_dist_"},
 5 |     // Mount "public" to the root URL path ("/*") and serve files with zero transformations
 6 |     "public": {url: "/", static: true, resolve: false}
 7 |   },
 8 |   plugins: ["@snowpack/plugin-svelte", "@snowpack/plugin-dotenv"],
 9 |   packageOptions: {
10 |     /* ... */
11 |   },
12 |   devOptions: {
13 |     /* ... */
14 |   },
15 |   buildOptions: {
16 |     /* ... */
17 |   },
18 |   alias: {
19 |     /* ... */
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	import './TailwindStyles.svelte';
 3 | 	
 4 | 	const message = 'Learn Svelte';
 5 | </script>
 6 | 
 7 | <style>
 8 | 	.App-logo {
 9 | 		animation: App-logo-scale infinite 1.6s ease-in-out alternate;
10 | 	}
11 | 	@keyframes App-logo-scale {
12 | 		from {
13 | 			transform: scale(1);
14 | 		}
15 | 		to {
16 | 			transform: scale(1.06);
17 | 		}
18 | 	}
19 | </style>
20 | 
21 | <div class="text-center font-serif">
22 | 	<header class="bg-gray-100 h-screen flex justify-center items-center flex-col text-3xl">
23 | 		<img src="/logo.svg" class="App-logo pointer-events-none m-4 h-64" alt="logo" />
24 | 		<p>
25 | 			Edit <code>src/App.svelte</code> and save to reload.
26 | 		</p>
27 | 		<a
28 | 			class="text-orange-500"
29 | 			href="https://svelte.dev"
30 | 			target="_blank"
31 | 			rel="noopener noreferrer"
32 | 		>
33 | 			{message}
34 | 		</a>
35 | 	</header>
36 | </div>
37 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="description" content="Web site created using create-snowpack-app" />
 8 |     <title>Snowpack App</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>You need to enable JavaScript to run this app.</noscript>
12 |     <script type="module" src="/_dist_/index.js"></script>
13 |     <!--
14 |       This HTML file is a template.
15 |       If you open it directly in the browser, you will see an empty page.
16 | 
17 |       You can add webfonts, meta tags, or analytics to this file.
18 |       The build step will place the bundled scripts into the <body> tag.
19 | 
20 |       To begin the development, run `npm start` or `yarn start`.
21 |       To create a production bundle, use `npm run build` or `yarn build`.
22 |     -->
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98.1 118">
2 |   <path fill="#ff3e00" d="M91.8 15.6C80.9-.1 59.2-4.7 43.6 5.2L16.1 22.8A31.25 31.25 0 001.9 43.9c-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"/>
3 |   <path fill="#fff" d="M40.9 103.9a21.8 21.8 0 01-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3l.6-2.6.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1a6.62 6.62 0 008.8 2L65.5 72c1.4-.9 2.3-2.2 2.6-3.8.3-1.6-.1-3.3-1-4.6a6.56 6.56 0 00-8.8-1.9l-10.5 6.7a18.6 18.6 0 01-5.6 2.4 21.8 21.8 0 01-23.4-8.7 20.2 20.2 0 01-3.4-15.3c.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1a6.56 6.56 0 00-8.8-1.9L32.4 46.1c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6a6.56 6.56 0 008.8 1.9l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5a21.8 21.8 0 0123.4 8.7c3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-tailwind-snowpack",
 3 |   "version": "0.1.0",
 4 |   "author": {
 5 |     "name": "Agney Menon",
 6 |     "email": "agney@outlook.in"
 7 |   },
 8 |   "keywords": [
 9 |     "csa-template"
10 |   ],
11 |   "scripts": {
12 |     "start": "snowpack dev",
13 |     "build": "snowpack build",
14 |     "test": "web-test-runner \"src/**/*.test.js\""
15 |   },
16 |   "dependencies": {
17 |     "svelte": "^4.2.19",
18 |     "tailwindcss": "^2.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "@snowpack/app-scripts-svelte": "^2.0.0",
22 |     "@snowpack/plugin-dotenv": "^2.0.4",
23 |     "@snowpack/plugin-svelte": "^3.3.0",
24 |     "@snowpack/web-test-runner-plugin": "^0.2.1",
25 |     "@testing-library/jest-dom": "^5.11.4",
26 |     "@testing-library/svelte": "^3.0.0",
27 |     "@web/test-runner": "^0.12.15",
28 |     "autoprefixer": "^10.0.4",
29 |     "chai": "^4.2.0",
30 |     "husky": "^5.0.9",
31 |     "jest": "^26.4.2",
32 |     "lint-staged": "^13.2.1",
33 |     "postcss": "^8.2.13",
34 |     "postcss-load-config": "^3.1.4",
35 |     "prettier": "^2.2.1",
36 |     "prettier-plugin-svelte": "^2.1.4",
37 |     "snowpack": "^3.0.11",
38 |     "svelte-preprocess": "^4.1.1"
39 |   },
40 |   "husky": {
41 |     "hooks": {
42 |       "pre-commit": "lint-staged"
43 |     }
44 |   },
45 |   "lint-staged": {
46 |     "*.{js,css,md}": "prettier --write"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte with TailwindCSS - Snowpack
 2 | 
 3 | > ✨ Community template for Svelte and Tailwind.
 4 | 
 5 | ![npm](https://img.shields.io/npm/v/svelte-tailwind-snowpack?logoColor=%23cd3534&style=flat-square)
 6 | ![Twitter Follow](https://img.shields.io/twitter/follow/agneymenon?style=flat-square)
 7 | 
 8 | Create a new project with:
 9 | 
10 | ```bash
11 | npx create-snowpack-app dir-name --template svelte-tailwind-snowpack
12 | ```
13 | 
14 | Uses `svelte-preprocess`.
15 | 
16 | - TailwindCSS with Autoprefixer
17 | - Testing with [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) and Web test runner
18 | - Prettier with [svelte-plugin](https://github.com/sveltejs/prettier-plugin-svelte)
19 | 
20 | ## Available Scripts
21 | 
22 | ### npm start
23 | 
24 | Runs the app in the development mode.
25 | Open http://localhost:8080 to view it in the browser.
26 | 
27 | The page will reload if you make edits.
28 | You will also see any lint errors in the console.
29 | 
30 | ### npm test
31 | 
32 | Launches the test runner in the interactive watch mode.
33 | See the section about running tests for more information.
34 | 
35 | ### npm run build
36 | 
37 | Builds a static copy of your site to the `build/` folder.
38 | Your app is ready to be deployed!
39 | 
40 | **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your `snowpack.config.json` config file.
41 | 
42 | ### Q: What about Eject?
43 | 
44 | No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
45 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | """
 2 | MIT License
 3 | 
 4 | Copyright (c) 2020 Fred K. Schott
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 | SOFTWARE.
23 | """
24 | 
25 | This license applies to parts of the repository originating from the
26 | https://github.com/facebook/create-react-app repository:
27 | 
28 | """
29 | MIT License
30 | 
31 | Copyright (c) 2013-present, Facebook, Inc.
32 | 
33 | Permission is hereby granted, free of charge, to any person obtaining a copy
34 | of this software and associated documentation files (the "Software"), to deal
35 | in the Software without restriction, including without limitation the rights
36 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
37 | copies of the Software, and to permit persons to whom the Software is
38 | furnished to do so, subject to the following conditions:
39 | 
40 | The above copyright notice and this permission notice shall be included in all
41 | copies or substantial portions of the Software.
42 | 
43 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
44 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
45 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
46 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
47 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
48 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
49 | SOFTWARE.
50 | """
51 | 
52 | This license applies to parts of packages/plugin-react-refresh/plugin.js originating 
53 | from the https://github.com/vitejs/vite-plugin-react repository:
54 | 
55 | """
56 | MIT License
57 | 
58 | Copyright (c) 2020-present, Yuxi (Evan) You
59 | 
60 | Permission is hereby granted, free of charge, to any person obtaining a copy
61 | of this software and associated documentation files (the "Software"), to deal
62 | in the Software without restriction, including without limitation the rights
63 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
64 | copies of the Software, and to permit persons to whom the Software is
65 | furnished to do so, subject to the following conditions:
66 | 
67 | The above copyright notice and this permission notice shall be included in all
68 | copies or substantial portions of the Software.
69 | 
70 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
71 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
72 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
73 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
74 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
75 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
76 | SOFTWARE.
77 | """


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