added svelte setup

Author: casprine

examples/svelte/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules
+public/bundle.*

examples/svelte/README.md

@@ -0,0 +1,86 @@
+# Svelte
+
+Setting up Tailwind with svelte is really simple, just install Tailwind and pocstcss-cli:
+
+```sh
+npm install tailwindcss postcss-cli --save-dev
+```
+
+If you want to remove unused styles, add PurgeCSS as well
+
+```
+npm install @fullhuman/postcss-purgecss
+```
+
+Create your Tailwind config file
+
+```sh
+./node_modules/.bin/tailwind init tailwind.js
+```
+
+Create a `postcss.config.js` file and add this to it
+
+```js
+const tailwindcss = require("tailwindcss");
+
+// only needed if you want to purge
+const purgecss = require("@fullhuman/postcss-purgecss")({
+  content: ["./src/**/*.svelte", "./public/**/*.html"],
+  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+});
+
+module.exports = {
+  plugins: [
+    tailwindcss("./tailwind.js"),
+
+    // only needed if you want to purge
+    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
+  ]
+};
+```
+
+Next, create a CSS file for your Tailwind styles. You have to store in it public folder `public/tailwind.css` and add this to it :
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Update your `package.json` with the custom scripts.
+
+`build:tailwind is only needed if you want to purge`
+
+```js
+"scripts": {
+    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
+    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
+    "dev": "run-p start:dev autobuild watch:build",
+    "build": "npm run build:tailwind && rollup -c",
+
+}
+```
+
+Finally, add a stylesheet link to your `public/index.html` file
+
+```html
+<link rel="stylesheet" href="index.css" />
+```
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run dev
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```

examples/svelte/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^6.1.2",
+    "rollup": "^1.10.1",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-livereload": "^1.0.0",
+    "rollup-plugin-node-resolve": "^4.2.3",
+    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-terser": "^4.0.4",
+    "sirv-cli": "^0.4.0",
+    "svelte": "^3.0.0",
+    "tailwindcss": "^1.0.3"
+  },
+  "scripts": {
+    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
+    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
+    "dev": "run-p start:dev autobuild watch:tailwind",
+    "build": "npm run build:tailwind && rollup -c",
+    "autobuild": "rollup -c -w",
+    "start": "sirv public",
+    "start:dev": "sirv public --dev"
+  },
+  "dependencies": {
+    "@fullhuman/postcss-purgecss": "^1.2.0"
+  }
+}

examples/svelte/postcss.config.js

@@ -0,0 +1,16 @@
+const tailwindcss = require("tailwindcss");
+
+// only needed if you want to purge
+const purgecss = require("@fullhuman/postcss-purgecss")({
+  content: ["./src/**/*.svelte", "./public/**/*.html"],
+  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+});
+
+module.exports = {
+  plugins: [
+    tailwindcss("./tailwind.js"),
+
+    // only needed if you want to purge
+    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
+  ]
+};

examples/svelte/public/favicon.png

@@ -0,0 +1,61 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+input[type="range"] {
+	height: 0;
+}
+
+button {
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}