Webpack template with tailwind and now.sh

.gitignore

@@ -4,3 +4,4 @@
 yarn-error.log
 /cypress/screenshots/
 /__sapper__/
+.idea

now.json

@@ -0,0 +1,33 @@
+{
+  "name": "template",
+  "version": 2,
+  "builds": [
+    {
+      "src": "__sapper__/build/index.js",
+      "use": "@now/node-server",
+      "config": {
+        "includeFiles": [
+          "build.json",
+          "../../package.json",
+          "../build/**",
+          "../../static/**",
+          "../../node_modules/**"
+        ],
+        "maxLambdaSize": "15mb"
+      }
+    },
+    {
+      "src": "static/**",
+      "use": "@now/static"
+    },
+    {
+      "src": "__sapper__/build/client/**",
+      "use": "@now/static"
+    }
+  ],
+  "routes": [
+    { "src": "/(.*(\\.css)|(\\.json)|(\\.png))", "dest": "/static/$1" },
+    { "src": "/client/(.*)", "dest": "/__sapper__/build/client/$1" },
+    { "src": "/(.*)", "dest": "/__sapper__/build/index.js" }
+  ]
+}

package.json

@@ -9,18 +9,24 @@
     "start": "node __sapper__/build",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
-    "test": "run-p --race dev cy:run"
+    "test": "run-p --race dev cy:run",
+    "now": "npm run build:tailwind && SAPPER_TIMESTAMP=$(date +%s%3N) sapper build && now -e SAPPER_TIMESTAMP=$(date +%s%3N)",
+    "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
+    "build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css"
   },
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "^0.5.0",
-    "sirv": "^0.4.0"
+    "sirv": "^0.4.0",
+    "tailwindcss": "^1.0.4",
+    "@fullhuman/postcss-purgecss": "^1.2.0"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "sapper": "^0.27.0",
     "svelte": "^3.0.0",
     "svelte-loader": "^2.9.0",
-    "webpack": "^4.7.0"
+    "webpack": "^4.7.0",
+    "postcss-cli": "^6.1.2"
   }
 }

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", "./src/**/*.html"],
+    defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+});
+
+module.exports = {
+    plugins: [
+        tailwindcss("./tailwind.config.js"),
+
+        // only needed if you want to purge
+        ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
+    ]
+}

src/template.html

@@ -7,6 +7,7 @@
 
 	%sapper.base%
 
+    <link rel='stylesheet' href='index.css'>
 	<link rel='stylesheet' href='global.css'>
 	<link rel='manifest' href='manifest.json'>
 	<link rel='icon' type='image/png' href='favicon.png'>

static/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    theme: {
+        extend: {}
+    },
+    variants: {},
+    plugins: []
+}