docs: updated installation section

fix: removed unused packages
fix: added basic typography
fix: removed tailwind typography from everywhere

README.md

@@ -21,6 +21,7 @@ A showcase can be found at `https://stwui.vercel.app/`. Documentation is still f
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   plugins: [
+    require('@tailwindcss/forms'),
     require('stwui/plugin')
   ],
   darkMode: 'class'

package.json

@@ -39,9 +39,7 @@
 		"@sveltejs/adapter-vercel": "next",
 		"@sveltejs/kit": "next",
 		"@sveltejs/package": "1.0.0-next.5",
-		"@tailwindcss/aspect-ratio": "^0.4.2",
 		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.7",
 		"@types/cookie": "^0.5.1",
 		"@typescript-eslint/eslint-plugin": "^5.38.0",
 		"@typescript-eslint/parser": "^5.38.0",

src/lib/components/list/Title.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 
-	const defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content';
+	const defaultClass = 'text-sm font-semibold text-light-content dark:text-dark-content';
 	const finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<p class={finalClass}>
+<h3 class={finalClass}>
 	<slot />
-</p>
+</h3>

src/lib/components/menu/Item.svelte

@@ -35,10 +35,7 @@
 	}
 </script>
 
-<div
-	class="prose max-w-full transition-all duration-300"
-	style="width: {$menuCollapse ? '3rem' : '100%'}"
->
+<div class="transition-all duration-300" style="width: {$menuCollapse ? '3rem' : '100%'}">
 	<a
 		on:click
 		use:tooltip={{

src/lib/components/post/Content.svelte

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

src/lib/components/post/Creator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
-	import { useContext } from '$lib/utils/useContext';
+	import { useContext } from '../../utils/useContext';
 	import { POST_HEADER_CONTEXT_ID } from './Header.svelte';
 
 	useContext({
@@ -9,7 +9,7 @@
 		component: 'Post.Header.Created'
 	});
 
-	const defaultClass = 'prose max-w-full text-md text-light-content dark:text-dark-content';
+	const defaultClass = 'text-md font-semibold 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 =
-		'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';
+		'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/lib/plugin/index.js

@@ -435,6 +435,25 @@ module.exports = plugin(
 			}
 		});
 		addBase({
+			h1: {
+				'font-weight': '800',
+				'font-size': '2.25em',
+				'line-height': '1.1111111'
+			},
+			h2: {
+				'font-weight': '700',
+				'font-size': '1.5em',
+				'line-height': '1.3333333'
+			},
+			h3: {
+				'font-weight': '600',
+				'font-size': '1.25em',
+				'line-height': '1.6'
+			},
+			h4: {
+				'font-weight': '600',
+				'line-height': '1.5'
+			},
 			"[type='text']:focus": {
 				outline: 'unset',
 				'outline-offset': 'unset',

src/routes/+page.svelte

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

src/routes/alert/+page.svelte

@@ -21,7 +21,7 @@
 				<Alert.Icon slot="icon">
 					<Icon icon="cancel" class="text-current" />
 				</Alert.Icon>
-				<Alert.Title slot="title"><span>Title</span></Alert.Title>
+				<Alert.Title slot="title">Title</Alert.Title>
 				<Alert.Description slot="description">I am a description</Alert.Description>
 				<Button
 					slot="extra"

src/routes/alert/examples.ts

@@ -58,7 +58,7 @@ export const example = `
 	<Alert.Icon slot="icon">
 		<Icon icon="cancel" class="text-current" />
 	</Alert.Icon>
-	<Alert.Title slot="title"><span>Title</span></Alert.Title>
+	<Alert.Title slot="title">Title</Alert.Title>
 	<Alert.Description slot="description">I am a description</Alert.Description>
 	<Button
 		slot="extra"

src/routes/installation/+page.svelte

@@ -8,8 +8,6 @@
 module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	plugins: [
-		require('@tailwindcss/typography'),
-		require('@tailwindcss/aspect-ratio'),
 		require('@tailwindcss/forms'),
 		require('stwui/plugin')
 	],
@@ -18,25 +16,21 @@ module.exports = {
 </script>
 
 <div class="p-12 w-full h-full overflow-auto">
-	<article class="prose w-full max-w-full">
-		<h1 class="text-light-content dark:text-dark-content mb-0">Installation</h1>
-		<Divider />
+	<h1 class="text-light-content dark:text-dark-content mb-0">Installation</h1>
+	<Divider />
 
-		<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
-			Run the following command to add STWUI to your project:
-		</p>
-	</article>
+	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+		Run the following command to add STWUI to your project:
+	</p>
 
 	<CodeBlock language="bash" code={installCode} />
 
-	<article class="prose w-full max-w-full">
-		<h1 class="text-light-content dark:text-dark-content mb-0 mt-12">Configure TailwindCSS</h1>
-		<Divider />
+	<h1 class="text-light-content dark:text-dark-content mb-0 mt-12">Configure TailwindCSS</h1>
+	<Divider />
 
-		<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
-			Modify your tailwind.config.cjs file with the following:
-		</p>
-	</article>
+	<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+		Modify your tailwind.config.cjs file with the following:
+	</p>
 
 	<CodeBlock language="javascript" code={tailwindCode} />
 </div>

tailwind.config.cjs

@@ -1,12 +1,7 @@
 module.exports = {
 	mode: 'jit',
 	content: ['./src/**/*.{html,js,svelte,ts}'],
-	plugins: [
-		require('@tailwindcss/typography'),
-		require('@tailwindcss/aspect-ratio'),
-		require('@tailwindcss/forms'),
-		require('./src/lib/plugin')
-	],
+	plugins: [require('@tailwindcss/forms'), require('./src/lib/plugin')],
 	'headwind.runOnSave': true,
 	darkMode: 'class',
 	theme: {