reconfigure css to allow consumer styling

It's a little jank, but it works. The consumer absolutely MUST have a
file at `$lib/styles/tailwind.css` that contains all necessary tailwind
imports AND also imports the `src/lib/styles/base.css` file from sui.

WILL address this in another commit.

src/app.css

@@ -1,3 +1,3 @@
-@import '$lib/styles/theme.css';
+@import '$lib/styles/tailwind.css';
 
 @custom-variant dark (&:where(.dark, .dark *));

src/lib/Combobox.svelte

@@ -462,7 +462,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	.picker {
 		--outer-gap: 0.5rem;

src/lib/DateInput.svelte

@@ -311,7 +311,7 @@
 {/snippet}
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	.date-input {
 		@apply ring-sui-accent dark:ring-sui-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;

src/lib/StateMachine.svelte

@@ -435,7 +435,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	:global(.circle-initial) {
 		transition: opacity 1s;

src/lib/TimeInput.svelte

@@ -363,7 +363,7 @@
 </div>
 
 <style lang="postcss">
-	@reference "./styles/theme.css";
+	@reference "$lib/styles/tailwind.css";
 
 	:global(.time-input) {
 		@apply h-16 w-24 text-center text-xl;

src/lib/styles/base.css

@@ -1,12 +1,3 @@
-/* packages/ui/src/styles/theme.css */
-@import 'tailwindcss';
-
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/container-queries';
-@plugin 'tailwindcss-animate';
-
-@custom-variant dark (&:where(.dark, .dark *));
-
 @theme {
 	/* Fonts - easily overrideable */
 	--font-*: initial;
@@ -93,13 +84,3 @@
 	--transition-property-colors: background-color, border-color, color, fill, stroke;
 	--transition-property-font-color: color;
 }
-
-@layer base {
-	*,
-	::after,
-	::before,
-	::backdrop,
-	::file-selector-button {
-		border-color: var(--color-sui-gray-200, currentcolor);
-	}
-}

src/lib/styles/tailwind.css

@@ -0,0 +1,18 @@
+/* packages/ui/src/styles/tailwind.css */
+@import 'tailwindcss';
+@import '$lib/styles/base.css';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/container-queries';
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-sui-gray-200, currentcolor);
+	}
+}

src/routes/+page.svelte

@@ -19,6 +19,8 @@
 	let dateInputValue = $state<Date | undefined>(undefined);
 </script>
 
+<title>sui</title>
+
 <h1 class="mb-4 text-3xl font-bold">sui — Opinionated Svelte 5 UI toolkit</h1>
 
 <p class="mb-4">
@@ -153,7 +155,7 @@
 </div>
 
 <style lang="postcss">
-	@reference '$lib/styles/theme.css';
+	@reference '$lib/styles/tailwind.css';
 
 	.component .title {
 		@apply mb-2 text-lg font-semibold;