Update components to use tailwind references

Author: maxfriedmann

src/lib/modules/modals/ModalContainer.svelte

@@ -112,6 +112,8 @@
 </dialog>
 
 <style>
+	@reference "tailwindcss/theme";
+
 	:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
 		overflow: hidden;
 		scrollbar-gutter: unset !important;

src/lib/modules/navigation/SideNavbar.svelte

@@ -56,6 +56,8 @@
 </div>
 
 <style>
+	@reference "tailwindcss/theme";
+
 	:global {
 		.menu-entry:hover {
 			@apply rounded-md cursor-pointer;

src/routes/install/+page.svelte

@@ -101,7 +101,9 @@
 	<ComponentPageHeader title="Tailwind Setup" level="2"></ComponentPageHeader>
 
 	To use the components with Tailwind CSS, you obviously need to have Tailwind CSS installed. Since
-	svelte (and sveltekit) strip out unused CSS, you need to add the following to your
-	tailwind.config.js content array: <br />
-	<pre>{`"node_modules/@smallstack/svelte-ui/dist/**/*.{html,svelte,js,ts}"`}</pre>
+	Tailwind CSS strips out unused CSS, you need to add the following to your css file:
+	<br />
+	<pre>{`@import "tailwindcss";
+@source "../node_modules/@smallstack/svelte-ui"; // <-- this is the important line
+@plugin "daisyui";`}</pre>
 </div>