fix(#16): Ensure DaisyUI styles apply to components

It turns out that tailwind excludes styles it hasn't found in use, so it needs to be explicitly told where to find the component files. This also therefore fixes the styles in the SignUp component.

src/lib/components/SignUp.svelte

@@ -28,12 +28,36 @@
 	}
 </script>
 
-<input
+<div class="flex flex-row gap-x-2">
-	type="text"
+	<label class="input input-bordered flex items-center gap-2">
-	placeholder="Email"
+		<svg
-	class="input input-bordered w-full max-w-xs"
+			xmlns="http://www.w3.org/2000/svg"
-	bind:value={email}
+			viewBox="0 0 16 16"
-/>
+			fill="currentColor"
+			class="w-4 h-4 opacity-70"
+			><path
+				d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
+			/><path
+				d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
+			/></svg
+		>
+		<input type="text" class="grow" placeholder="Email" bind:value={email} />
+	</label>
 
-<input type="password" bind:value={password} placeholder="Password" />
+	<label class="input input-bordered flex items-center gap-2">
-<button class="btn btn-secondary" on:click={signUpNewUser}>Sign Up</button>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 16 16"
+			fill="currentColor"
+			class="w-4 h-4 opacity-70"
+			><path
+				fill-rule="evenodd"
+				d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
+				clip-rule="evenodd"
+			/></svg
+		>
+		<input type="password" class="grow" bind:value={password} placeholder="Password" />
+	</label>
+
+	<button class="btn btn-primary" on:click={signUpNewUser}>Sign Up</button>
+</div>

src/routes/+page.svelte

@@ -58,5 +58,3 @@
 	<PokemonSprite pokedexNumber={666} form={''} />
 	<PokemonSprite pokedexNumber={'003'} form={''} />
 </div>
-
-<div class="bg-blue-500 text-white p-4">This is a component styled with Tailwind CSS</div>

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/routes/**/*.{svelte,js,ts}'],
+	content: ['./src/routes/**/*.{svelte,js,ts}', './src/lib/components/**/*.{svelte,js,ts}'],
 	theme: {
 		extend: {}
 	},