diff --git a/src/app.css b/src/app.css
index aa70351..fb7ffb2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,3 @@
-@import '$lib/styles/theme.css';
+@import '$lib/styles/tailwind.css';
 
 @custom-variant dark (&:where(.dark, .dark *));
diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index b97f718..4bd4926 100644
--- a/src/lib/Combobox.svelte
+++ b/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;
diff --git a/src/lib/DateInput.svelte b/src/lib/DateInput.svelte
index 8fb3985..8ee3a38 100644
--- a/src/lib/DateInput.svelte
+++ b/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;
diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index 897ea51..0dfc09a 100644
--- a/src/lib/StateMachine.svelte
+++ b/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;
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index 6e0328d..455eda9 100644
--- a/src/lib/TimeInput.svelte
+++ b/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;
diff --git a/src/lib/styles/theme.css b/src/lib/styles/base.css
similarity index 90%
rename from src/lib/styles/theme.css
rename to src/lib/styles/base.css
index 4dcc85d..8b6d02f 100644
--- a/src/lib/styles/theme.css
+++ b/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);
-	}
-}
diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css
new file mode 100644
index 0000000..0c569f5
--- /dev/null
+++ b/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);
+	}
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 48bc33c..47d709d 100644
--- a/src/routes/+page.svelte
+++ b/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;