fix(Post.Content): added tailwind typography

fix(Post.Header.Created): added tailwind typography
fix(Post.Header.Creator): added tailwind typography
fix(Statistic): added tailwind typography
docs(index): added tailwind typography

src/lib/components/post/Content.svelte

@@ -15,7 +15,8 @@
 		component: 'Post.Content'
 	});
 
-	const defaultClass = 'first:rounded-t-md last:rounded-b-md px-2 py-3 sm:px-6';
+	const defaultClass =
+		'prose max-w-full text-light-content dark:text-dark-content first:rounded-t-md last:rounded-b-md px-2 py-3 sm:px-6';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

src/lib/components/post/Created.svelte

@@ -9,7 +9,8 @@
 		component: 'Post.Header.Created'
 	});
 
-	const defaultClass = 'text-xs text-light-secondary-content dark:text-dark-secondary-content';
+	const defaultClass =
+		'prose max-w-full text-xs text-light-secondary-content dark:text-dark-secondary-content';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

src/lib/components/post/Creator.svelte

@@ -9,7 +9,7 @@
 		component: 'Post.Header.Created'
 	});
 
-	const defaultClass = 'text-md font-semibold text-light-content dark:text-dark-content';
+	const defaultClass = 'prose max-w-full text-md text-light-content dark:text-dark-content';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

src/lib/components/statistic/Statistic.svelte

@@ -2,7 +2,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	const defaultClass =
-		'overflow-hidden rounded-md px-4 py-5 shadow-md dark:shadow-black sm:p-5 bg-light-surface dark:bg-dark-surface';
+		'prose max-w-full overflow-hidden rounded-md px-4 py-5 shadow-md dark:shadow-black sm:p-5 bg-light-surface dark:bg-dark-surface';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

src/routes/+page.svelte

@@ -99,10 +99,10 @@
 	<Row class="h-[500px]">
 		<Col class="md:col-12 col-24 h-full">
 			<div
-				class="p-4 md:p-8 min-h-[500px] h-[calc(100vh-200px)] flex flex-col justify-center items-start"
+				class="prose max-w-full p-4 md:p-8 min-h-[500px] h-[calc(100vh-200px)] flex flex-col justify-center items-start"
 			>
-				<h1 class="font-black text-6xl text-primary">Components you want</h1>
-				<h1 class="font-black text-6xl text-light-content dark:text-dark-content">
+				<h1 class="mb-0 text-6xl text-primary">Components you want</h1>
+				<h1 class="mb-0 text-6xl text-light-content dark:text-dark-content">
 					the way you want them
 				</h1>
 				<p class="text-light-content dark:text-dark-content mt-4">