Configure tailwind

web/package.json

@@ -30,25 +30,26 @@
 		"compression": "^1.7.4",
 		"express": "^4.17.1",
 		"node-fetch": "^2.6.0",
-		"sirv": "^0.4.6"
+		"sirv": "^1.0.5"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.11.1",
-		"@babel/plugin-syntax-dynamic-import": "^7.0.0",
+		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/plugin-transform-runtime": "^7.11.0",
 		"@babel/preset-env": "^7.11.0",
 		"@babel/runtime": "^7.11.2",
 		"@rollup/plugin-babel": "^5.1.0",
-		"@rollup/plugin-commonjs": "^13.0.2",
+		"@rollup/plugin-commonjs": "^14.0.0",
 		"@rollup/plugin-json": "^4.1.0",
 		"@rollup/plugin-node-resolve": "^8.4.0",
 		"@rollup/plugin-replace": "^2.3.3",
-		"@rollup/plugin-typescript": "^4.1.2",
+		"@rollup/plugin-typescript": "^5.0.2",
 		"@types/compression": "^1.7.0",
 		"@types/express": "^4.17.7",
 		"@types/node-fetch": "^2.5.7",
 		"@typescript-eslint/eslint-plugin": "^3.9.0",
 		"@typescript-eslint/parser": "^3.9.0",
+		"autoprefixer": "^9.8.6",
 		"bufferutil": "^4.0.1",
 		"class-validator": "^0.12.2",
 		"cross-env": "^7.0.2",
@@ -56,13 +57,17 @@
 		"eslint-config-airbnb-base": "^14.2.0",
 		"eslint-plugin-import": "^2.22.0",
 		"eslint-plugin-svelte3": "^2.7.3",
+		"postcss": "^7.0.32",
+		"postcss-import": "^12.0.1",
+		"postcss-load-config": "^2.1.0",
 		"reflect-metadata": "^0.1.13",
 		"rollup": "^2.23.1",
 		"rollup-plugin-svelte": "^5.2.3",
-		"rollup-plugin-terser": "^6.1.0",
-		"sapper": "^0.27.16",
+		"rollup-plugin-terser": "^7.0.0",
+		"sapper": "^0.28.0",
 		"svelte": "^3.24.1",
-		"svelte-preprocess": "^3.9.12",
+		"svelte-preprocess": "^4.0.10",
+		"tailwindcss": "^1.6.2",
 		"tslib": "^2.0.1",
 		"typescript": "^3.9.7",
 		"utf-8-validate": "^5.0.2"

web/rollup.config.js

@@ -8,10 +8,10 @@ import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import config from "sapper/config/rollup";
 import pkg from "./package.json";
-import { preprocess as sveltePreprocessConfig } from "./svelte.config";
 
 const preprocess = [
-    sveltePreprocessConfig,
+    // eslint-disable-next-line global-require
+    require("./svelte.config").preprocess,
     // You could have more preprocessors, like MDsveX
 ];
 
@@ -30,7 +30,7 @@ const onwarn = (warning, _onwarn) => (warning.code === "CIRCULAR_DEPENDENCY" &&
 export default {
     client: {
         input: config.client.input().replace(/\.js$/, ".ts"),
-        output: config.client.output(),
+        output: { ...config.client.output() },
         plugins: [
             replace({
                 "process.browser": true,

web/src/components/ExampleComponent.svelte

@@ -7,9 +7,7 @@
 
 <style>
 	h1 {
-		color: #4299E1;
-		font-size: 1.875rem;
-		font-weight: 200;
+		@apply text-red-200;
 	}
 
 	p {

web/src/routes/_layout.svelte

@@ -11,6 +11,12 @@
 	$: path = $page.path.slice(1);
 </script>
 
+<style global>
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+</style>
+
 <svelte:head>
 	<title>
 		{path ? path.charAt(0).toUpperCase() + path.slice(1) : "Index"}

web/src/server.ts

@@ -11,21 +11,21 @@ const PORT = process.env.PORT; // eslint-disable-line prefer-destructuring
 const dev = process.env.NODE_ENV === "development";
 
 const createSapperServer = async (): Promise<Express> => {
-	const app = express();
+    const app = express();
 
-	app.use(
-		compression({ threshold: 0 }),
-		sirv("static", { dev }),
-		sapper.middleware(),
-	);
+    app.use(
+        compression({ threshold: 0 }),
+        sirv("static", { dev }),
+        sapper.middleware(),
+    );
 
-	return app;
+    return app;
 };
 
 createSapperServer().then((app) => {
 	app.listen(PORT, (err?: any): void => { // eslint-disable-line
-		if (err) console.log("error", err);
-	});
+        if (err) console.log("error", err);
+    });
 });
 
 export { sapper };

web/src/template.html

@@ -12,9 +12,6 @@
 		<link rel="icon" type="image/png" href="favicon.png" />
 		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
 
-		<link rel="stylesheet" href="/main.css" />
-		<link rel="stylesheet" href="/normalize.css" />
-		
 		<!-- Sapper generates a <style> tag containing critical CSS
   		for the current page. CSS for the rest of the app is
   		lazily loaded when it precaches secondary pages -->

web/static/main.css

@@ -1,17 +0,0 @@
-html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-height: 100vh;
-    line-height: 1.0;
-}
-
-#sapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 0%;
-}

web/static/normalize.css

@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

web/svelte.config.js

@@ -1,6 +1,14 @@
+/* eslint-disable global-require */
 const sveltePreprocess = require("svelte-preprocess");
 
 module.exports = {
     preprocess: sveltePreprocess({
+        postcss: {
+            plugins: [
+                require("postcss-import"),
+                require("tailwindcss"),
+                require("autoprefixer"),
+            ],
+        },
     }),
 };

web/tailwind.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    purge: {
+        content: [
+            "./src/**/*.svelte",
+            "./src/**/*.html",
+        ],
+    },
+    theme: {
+        extend: {},
+    },
+    variants: {},
+    plugins: [],
+};