feat(apps/example-app): add initial tailwindcss config (#21)

apps/sveltekit-example-app/package.json

@@ -24,8 +24,11 @@
     "@sveltejs/vite-plugin-svelte": "3.0.2",
     "@toolchain/eslint-config": "workspace:*",
     "@toolchain/vitest-config": "workspace:*",
+    "autoprefixer": "10.4.18",
+    "postcss": "8.4.35",
     "svelte": "4.2.12",
     "svelte-check": "3.6.5",
+    "tailwindcss": "3.4.1",
     "tslib": "2.6.2",
     "vite": "5.1.4"
   }

apps/sveltekit-example-app/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/sveltekit-example-app/src/app.css

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

apps/sveltekit-example-app/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import '../app.css'
+</script>
+
+<slot />

apps/sveltekit-example-app/src/routes/+page.svelte

@@ -8,6 +8,11 @@
   $: greeting = greetUser(data.user)
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-<p>{greeting}</p>
+<div class="space-y-1">
+  <h1 class="text-4xl">Welcome to SvelteKit</h1>
+  <p>
+    Visit <a class="text-blue-600 hover:underline" href="https://kit.svelte.dev">kit.svelte.dev</a> to
+    read the documentation
+  </p>
+  <p class="text-2xl">{greeting}</p>
+</div>

apps/sveltekit-example-app/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+const config = {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
+export default config