💄 Add TWCSS and base styles with fonts Inter/Fira Mono

example-app/package.json

@@ -12,15 +12,24 @@
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
+    "autoprefixer": "^10.2.5",
+    "cssnano": "^5.0.1",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^3.2.0",
+    "postcss": "^8.2.10",
+    "postcss-load-config": "^3.0.1",
     "prettier": "~2.2.1",
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.34.0",
-    "svelte-preprocess": "^4.0.0",
+    "svelte-preprocess": "^4.7.1",
+    "tailwindcss": "^2.1.1",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@fontsource/fira-mono": "^4.3.0",
+    "@fontsource/inter": "^4.3.0"
+  }
 }

example-app/postcss.config.cjs

@@ -0,0 +1,22 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+module.exports = {
+	plugins: [
+		// Some plugins, like postcss-nested, need to run before Tailwind
+		
+		tailwindcss,
+		
+		// But others, like autoprefixer, need to run after
+
+		autoprefixer,
+		
+		!dev && cssnano({
+			preset: "default",
+		}),
+	],
+};

example-app/src/app.postcss

@@ -0,0 +1,74 @@
+@import "@fontsource/fira-mono";
+@import "@fontsource/inter";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: "Inter", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c7c7c7;
+  border-radius: 24px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a1a1a1;
+  border-radius: 24px;
+}
+
+body::-webkit-scrollbar {
+  width: 8px;
+}
+
+body::-webkit-scrollbar-track {
+  width: 12px;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+}
+
+body::before {
+  content: "";
+  width: 80vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 10vw;
+  z-index: -1;
+  opacity: 0.05;
+}
+
+#svelte {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 0 0 1em 0;
+}
+
+h2 {
+  font-size: 1rem;
+}
+
+@media (min-width: 720px) {
+  h1 {
+    font-size: 2.4rem;
+  }
+}

example-app/src/routes/__layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import "../app.postcss";
+</script>
+
+<main>
+  <slot />
+</main>
+
+<style lang="postcss">
+  main {
+    @apply flex flex-1 flex-col p-4 w-full max-w-5xl my-0 mx-auto box-border mt-20;
+  }
+</style>

example-app/src/routes/index.svelte

@@ -1,2 +1,2 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<p>Visit <a class="text-blue-600 underline" href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

example-app/svelte.config.js

@@ -4,7 +4,11 @@ import preprocess from 'svelte-preprocess';
 const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
-	preprocess: preprocess(),
+	preprocess: [
+		preprocess({
+			postcss: true
+		}),
+	],
 
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html

example-app/tailwind.config.cjs

@@ -0,0 +1,26 @@
+const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
+
+module.exports = {
+	mode: "aot",
+	purge: {
+		content: [
+			"./src/**/*.{html,js,svelte,ts}",
+		],
+		options: {
+			defaultExtractor: (content) => [
+				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
+				...tailwindExtractor(content),
+				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
+				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
+			],
+		},
+		safelist: [/^svelte-[\d\w]+$/],
+	},
+	theme: {
+		extend: {},
+	},
+	variants: {
+		extend: {},
+	},
+	plugins: [],
+};